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在上方单元格的底部（对于border-top）添加1px边框，向左边的单元格右侧添加1px边框（对于border-right）或者如果顶部或左侧没有单元格则向表格添加1px边框。

虽然这对于仅在页面加载时呈现的表可能不是通用的，但是对于动态更改表，例如隐藏/显示具有边框的行，这是显着的，因为它将单元格的高度或单元格的宽度更改为左边是-1px（由于td高度和宽度的计算方式），因此会导致原始尺寸显着调整。

应该有一种标准的计算方法，不幸的是，对于动态表，firefox方法并没有真正起作用。它使边框折叠选项变得无用。

要克服这些问题，请删除border-collapse并添加border-spacing：0。

Answer 2

您看到的是Firefox和Chrome如何处理border-collapse的不同之处。虽然两个浏览器都能正确呈现所需的结果，但它们的计算方法略有不同。

Firefox如此阅读：

<table>本身有border-top-width: 1px和border-left-width: 1px
每个<td>包含border-right-width: 1px和border-bottom-width: 1px

Chrome会将每个<td>视为具有自己的边框。

从本质上讲，当它看到border-collapse时，Firefox会修改每个单元格的属性以删除边框 - 而Chrome会保留值并且只是重叠每个边框。效果是相同的，只是<td>级别的不同值。在这两种浏览器中，<td>的边框将位于其前面的<td>之上（在上方或左侧）。

边框崩溃FF和Webkit的差异

2 个答案: