css - FF 和 Webkit 中的 Border Collapse 差异

Question

我有一个包含以下规则的表:

    <table cellspacing="0" cellpadding="0" style="table-layout:fixed;
width:1000px;border-collapse:collapse;border-spacing:0">

并且单元格具有以下 CSS:

td{
padding:4px;
height:22px;
border:1px solid gray;
}

我的表格单元格的计算样式在 FF 中如下所示:

padding-top 4px
padding-right   4px
padding-bottom  4px
padding-left    4px
border-top-width    0
border-right-width  1px
border-bottom-width 1px
border-left-width   0

而在 webkit 上，它看起来像这样:

padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;

由于某些原因，以下两个属性存在差异:

border-top-width
border-left-width

这是一个已知问题吗？任何可能的问题解决方案??

Answer 1

Derrylwc，这不完全正确 - 效果不一样。 Firefox 将 1px 的边框添加到上方单元格的底部(对于 border-top)，将 1px 的边框添加到左侧单元格的右侧(对于 border-right)，如果顶部或左侧没有单元格，则添加到表格。

虽然这对于仅在页面加载时呈现的表格可能不会引起注意，但对于动态更改表格(例如隐藏/显示具有边框的行)来说，这是值得注意的，因为它会将上方单元格的高度或单元格的宽度更改为左边 -1px(由于 td 高度和宽度的计算方式)，因此导致原始大小明显调整。

应该有一种计算这些的标准方法，不幸的是对于动态表，firefox 方法并不真正有效。它使 border-collapse 选项变得无用。

为了克服这些问题，移除 border-collapse 并添加 border-spacing: 0。