绝对定位的表头(th) - 哪个浏览器错了？

Question

这个带有一个绝对定位列的简单表在Firefox(和IE)中的呈现方式与在Chrome(以及其他基于Webkit的浏览器)中的呈现方式不同:

http://jsfiddle.net/WZ6x8/

<div>
    <table>
        <tr>
            <th class="absolute">&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </table>
</div>

* {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    table-layout:fixed;
}
th {
    border: 1px solid black;
    width: 100px;
}
.absolute {
    left: 0;
    position: absolute;
}
div {
    margin-left: 100px;
}

为什么会有区别？哪个浏览器出错(根据标准)？如何在不删除线路的情况下修复所有浏览器border-collapse: collapse？

编辑:正如@urzeit所说,"如果你top: 0;在firefox中指定输出与chrome相同." 但是,有两个问题:首先,有多行,将top: 0;它们全部折叠成一个; 第二,绝对定位列的右边缘延伸一个像素太远.您可以在http://jsfiddle.net/WZ6x8/3上看到这两个问题.

Answer 1

这是由于舍入问题引起的,这些问题在浏览器中经常是不一致的,并且可能与背景偏移,百分比计算等问题相同.

简而言之,舍入问题发挥作用的原因可以在第17.6.2节中找到,正如您可能已经猜到的那样,它描述了折叠边界模型:

边框以单元格之间的网格线为中心.在奇数个离散单元(屏幕像素,打印机点)的情况下,用户代理必须找到一致的规则以进行四舍五入.

和:

通过检查使用表的顶部边框折叠其顶部边框的所有单元格来计算表格的顶部边框宽度.表格的顶部边框宽度等于最大折叠顶部边框的一半.通过检查底部边框与表底部折叠的所有单元格来计算底部边框宽度.底部边框宽度等于最大折叠底部边框的一半.

由于边界宽度是1个像素,这是一个奇数,因此在尝试将该值减半时会出现舍入问题.因此,哪个浏览器错误 - 或者是否有任何浏览器 - 的问题是值得商榷的.

不幸的是,因为这是一个舍入问题,除非通过不可思议的复杂hackery,否则不可能使用纯CSS解决这个问题,并且使用脚本很难这样做,因为在报告十进制/小数偏移值时浏览器往往不一致(特别是,Firefox,IE和Chrome 都为offsetTop你的表格单元及其下一个兄弟提供了截然不同的值.

虽然我无法为您的问题提供解决方案,但希望至少我已经帮助您理解为什么浏览器的行为方式如此.

如果您对为什么问题最终取决于折叠边界模型的定义方式感兴趣,那么这就是细节.

第9.7节规定如果一个元素是绝对定位的,那么它display被设置为block,即使它本来是a table-cell.在所有浏览器中,实际计算display的th是block,所以没有问题.

正如你正确地指出的那样,包含块的表格单元格的是初始包含块.这将它从通常的包含块中移除,否则它将成为表.第10.6.4节确实补充说,如果你的单元没有任何指定的高度,顶部或底部偏移,即它们都是auto,那么它应该保持在静态垂直位置并相应地进行测量.(同样水平位置中占部分10.3.7,但是因为你已经给它left: 0和width: 100px,它被转移到了左边缘和其宽度为指定,不包括边界).

但是,什么是这个静态垂直位置？因为它通常display: table-cell不是绝对定位的,所以静态位置及其相应的测量值由其在表格中的位置决定.

您给定的表格布局由第17节的以下小节涵盖:

• 17.5表格内容的可视化布局
• 17.5.2.1固定表格布局
• 17.6.2折叠边界模型

第17节包含有关如何布置表,标题,表行和表格单元的详细说明.其中很多都是基于HTML的,并且由于各种原因,某些部分变得模糊和/或未定义.固定表格布局虽然定义得很好,但在这种情况下甚至不相关.

第17.5节说明了这一点在底部附近:

折叠边框模型中的行,列,行组和列组的边缘与单元格边框居中的假想网格线重合.(因此,在这个模型中,行一起完全覆盖了表格,没有留下任何间隙;同样适用于列.)

和:

注意.根据第9.7节中的规则,表格单元格的定位和浮动可能导致它们不再是表格单元格.使用浮动时,匿名表对象上的规则也可能导致创建匿名单元对象.

当然,上面已经解释过了.

但如果一个绝对定位的表格单元不再是一个单元格,会发生什么？

"缺失单元"是行/列网格中未被元素或伪元素占据的单元.丢失的单元格呈现为好像匿名表格单元格框占据了它们在网格中的位置.

因此,虽然实际的th盒子是绝对定位的,但它会在其位置留下一个匿名的"ghost"单元格,以便正确地呈现表格.该匿名表单元格是空的,也没有继承实际的表单元格的样式,所以它有没有内在的宽度.

但是,因为实际的表格单元格的垂直位置是静态的,所以它仍然受到表格渲染方式的影响,这将我们带到折叠边界模型的第17.6.2节.