Firefox的Inspector疯了吗？

Question

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

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

它指向第21行的无辜css是：

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

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

Link to sample（点击一行“展开”它并检查扩展行的TD。（是的，在幕后有一些Javascript“DOM手术”，但是，我仍然期待像Firefox这样的成熟浏览器“保持冷静”并完成其工作，即使是Inspector ......）

Answer 1

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

请在此处阅读：http://www.w3.org/TR/CSS2/tables.html#collapsing-borders

Answer 2

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

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

您在TD元素上设置border-collapse属性。但是，对于TD元素，该属性不适用，因此它被丢弃。相反，it only applies to TABLE elements。

将CSS规则更改为：

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

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