火狐的Inspector疯了吗？

Question

火狐如何为TD计算1px的边框，使其具有border: 0样式，以及火狐web检查器如何向我显示确实，边框样式为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

问题的原因在您的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在他的回答中所解释的那样)。

Answer 2

它是1px，因为表格使用的是折叠边框，而下一行单元格的上边框是1px。但是在折叠边框模型中，下一个单元格(和行，因为它们是折叠的)的上边框与这个单元格(和行)的下边框是相同的，所以它们以相同的值显示。更准确地说，每个人都以一种奇怪的方式获得了一半的边界，但在检查器中可能没有真正好的方式来表示这一点。

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