firefox与chrome对border-collapse解析存在本质差异：firefox塌陷后非主导边返回0px，chrome重叠仍报告原始宽度，需用显式边框、伪类控制及box-shadow等组合策略统一视觉效果。
Firefox 和 Chrome 对 border-collapse: collapse 的解析差异真实存在，且无法靠“写对 CSS”完全抹平——关键在于它们对边框合并逻辑的底层实现不同，必须用组合策略绕过。
为什么 getComputedStyle(td).borderLeftWidth 在 Firefox 返回 0px 而 Chrome 返回 1px
这不是 bug，是规范允许的渲染分歧：Firefox 把相邻边框“塌陷（collapse）”理解为物理合并后只保留一条边框线，因此对非主导边（如左侧边框被右侧单元格边框覆盖时）返回 0px；Chrome 和 IE 则按“重叠（overlap）”处理，所有声明的边框都参与计算，只要没被更粗/更实的边框覆盖，就仍报告原始宽度。
这意味着：
- 你不能依赖
getComputedStyle检测某个单元格单侧边框是否存在——它在不同浏览器下语义不一致 - 用 JS 动态控制边框显隐（比如 hover 高亮某列）时，Firefox 可能“看不见”本该有的边框变化
- 自动化测试中若断言
borderLeftWidth === '1px'，会在 Firefox 必然失败
统一表格边框视觉效果的三步实操法
不追求 JS 层面数值一致，而是确保用户看到的线条粗细、连续性、内外框关系完全相同：
- 强制所有边框由
td和th显式定义，不依赖table自身的border。例如：td, th { border: 1px solid #ccc; } - 给
table设border-collapse: collapse+border: none，彻底剥离外框干扰 - 用伪类精准控制首尾行列边框：
td:first-child, th:first-child { border-left: none; }和td:last-child, th:last-child { border-right: none; }，避免因合并顺序导致的“半条线”残留
遇到 colspan/rowspan 时 Chrome 边框变粗？别碰 border-collapse
Chrome 的表格渲染引擎对跨单元格边框的合并逻辑有已知缺陷（官方承认“old issue”，未修复），尤其当 colspan 单元格与普通单元格相邻时，横向边框可能重复绘制。
此时应放弃纯 CSS 合并方案，改用替代路径：
- 用
box-shadow: inset 0 -1px 0 #ccc模拟下边框——它不受colspan影响，且所有浏览器渲染一致 - 或改用
background-image: linear-gradient(to bottom, transparent 1px, #ccc 1px, #ccc 2px, transparent 2px)绘制等距横线，完全规避边框合并逻辑 - 如果必须用 border，把跨单元格行单独抽成
thead或tfoot，再配合border-bottom: 2px solid #333强制加粗，比依赖自动合并更可控
最容易被忽略的一点：caption 元素根本不在 border-collapse 管辖范围内
caption 是独立块级元素，它的上下 margin 在 Firefox（0.67em）、Chrome（1em）、Safari（浮动值）中各不相同，且 border-collapse 对它完全无效。如果你发现表格标题和表头之间空隙忽大忽小，大概率是它在作祟。
必须手动重置：
caption {
display: table-caption;
margin: 0.67em auto;
text-align: center;
}
注意：不要只写 text-align: center，IE 会把它当 inline 处理导致宽度异常；display: table-caption 是唯一能触发正确盒模型的取值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
