Safari 15.4–16.x 动态切换 border-collapse 失效需强制重绘（如 offsetHeight）；IE/Edge Legacy 存在颜色裁剪与兼容问题，应统一边框色并禁用虚线；Chrome/Firefox 的“半条线”源于 thead/tbody UA 样式未重置；框架可能覆盖该属性，须用高优先级选择器或配置覆盖；合并后宽度计算逻辑改变，JS 测量需在应用后执行。
border-collapse: collapse 在 Safari 中动态切换失效
某些版本 Safari（尤其是 15.4–16.x）对 border-collapse 的 CSS 动画或 JS 切换响应迟钝，比如用 classList.toggle() 切换 table 的 collapsed 类后，边框仍显示为分离状态，但 computed style 已是 collapse。
这不是 bug，而是 Safari 渲染管线未触发重绘。临时绕过方式是加一个无视觉影响的强制重绘触发：
- 给
table加transform: translateZ(0)或will-change: border-collapse - 切换后手动调用
table.offsetHeight（读取布局触发回流） - 避免直接在媒体查询中写
border-collapse: collapse—— 改用 class 控制更可靠
IE/Edge Legacy 对 border-collapse 的兼容性断层
IE8+ 支持 border-collapse: collapse，但 IE7 及更早版本完全忽略；Edge 12–18 虽支持，却存在「合并后边框颜色被裁剪」的渲染异常，尤其当 th 和 td 边框颜色深浅接近时，部分像素会消失。
应对策略不是降级，而是提前规避渲染歧义：
立即学习“前端免费学习笔记（深入）”；
- 统一用
td, th { border-color: #000; }，避免使用rgba()或浅灰（如#eee） - 禁用
border-style: dashed或dotted—— 这些在旧引擎中极易错位、断点不齐 - 若必须支持 IE9–11，用
table { border: 1px solid #000; }+td, th { border: none; }模拟单外框，放弃内线合并
Chrome/Firefox 下边框“半条线”残留问题
常见于首行/末行/首列/末列：明明写了 border-collapse: collapse，但表格顶部或左侧多出一条 0.5px 偏移的细线，Inspect 发现是 thead 或 tbody 的默认 margin/border 干扰。
根本原因不是表格本身，而是浏览器对 thead、tbody 的 UA 样式未被重置：
- 显式重置：
thead, tbody, tfoot { border: 0; margin: 0; } - 确保
table上没意外继承父容器的border（比如卡片组件带border） - 检查是否有
outline或box-shadow被误加到table或其子元素上
框架注入导致 border-collapse 被覆盖
Bootstrap、Ant Design 等框架常在全局重置表样式，例如 Bootstrap 5 默认设 table { border-collapse: separate; border-spacing: 0; }，而 Tailwind 默认不生成任何表格边框类 —— 导致你写的 border-collapse: collapse 被更高优先级规则压制。
调试时别只看自己的 CSS 文件，重点查 DevTools 的 Styles 面板里哪条规则带 !important 或来自 bootstrap.css：
- 用更具体的选择器覆盖：
table.data-table { border-collapse: collapse !important; } - 或改用框架提供的定制入口：Bootstrap 通过 SCSS 变量
$table-border-collapse，Tailwind 在tailwind.config.js中扩展theme.extend.borderColor - 避免在
tr或div.table-wrapper上写border-collapse—— 它只对table元素生效
最常被忽略的一点：合并边框后，table 的实际宽度不再等于所有 td 宽度之和加边框 × 2 —— 因为内边框已“共享”，计算逻辑由浏览器按规范重新合成。如果你依赖 JS 测量单元格宽度做对齐，务必在 border-collapse: collapse 应用后再读取尺寸。
