2

Firefox 如何为 TD 样式计算 1px 边框，border: 0Firefox Web 检查器如何向我展示确实，边框的样式设置为0px但同时它最终是1px？

这是 Firefox 网络检查器的屏幕截图：

截屏

它引用的第 21 行的无辜 css 是：

.smart-table-tr-active td {
    border: 0;
}

并且检查员没有显示其他覆盖规则。它在 Chrome 和 IE8+ 中运行得非常好...... 1px 边框的“疯狂”只发生在 Firefox 中（干净的配置文件，没有扩展，最新版本 - Windows 7 64 位上的 17.0.1）。

链接到示例（单击一行以“展开”它并检查展开行的 TD。（是的，幕后有一些 Javascript“DOM 手术”，但我仍然希望像 Firefox 这样的成熟浏览器能够“保持冷静”并做好自己的工作，即使是督察......）

4

2 回答 2

4

它是 1px，因为表格使用折叠边框，并且下一行单元格的顶部边框是 1px。但是在折叠边框模型中，下一个单元格（和行，因为它们折叠）的顶部边框与该单元格（和行）的底部边框相同，因此它们显示为相同的值......更准确地说，每个以一种奇怪的方式获得一半的边界，但在检查器中可能没有真正的好方法来表示它。

在这里阅读：http: //www.w3.org/TR/CSS2/tables.html#collapsing-borders

于 2012-12-15T17:44:40.750 回答
4

问题的原因在于您的 CSS 文件：

table.smart-table td {
    border-collapse: separate;
    /*position: relative;*/
}

您正在border-collapseTD 元素上设置属性。但是，该属性不适用于 TD 元素，因此它被丢弃了。相反，它仅适用于 TABLE 元素。

将您的 CSS 规则更改为：

table.smart-table {
    border-collapse: separate;
}

您的问题将得到解决。设置单独的边界将确保边界不共享（正如鲍里斯在他的回答中解释的那样）。

于 2012-12-15T17:53:43.000 回答