Question

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

enter image description here

<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所述，＆＃34;如果指定top: 0;，则firefox中的输出与chrome中的输出相同。＆＃34;但是，有两个问题：首先，有多行，top: 0;将它们全部折叠为一个;第二，绝对定位列的右边缘延伸一个像素太远。您可以在http://jsfiddle.net/WZ6x8/3找到这两个问题。

Answer 1

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

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

边框位于单元格之间的网格线上。用户代理必须找到一致的规则，以便在奇数个离散单位（屏幕像素，打印机点）的情况下进行四舍五入。

和

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

由于边框宽度为1像素（奇数），因此在尝试将该值减半时会出现舍入问题。因此，哪个浏览器出错的问题 - 或者的问题 - 是否值得商榷。

不幸的是，因为这是一个四舍五入的问题，除非通过不可思议的复杂hackery，否则不可能解决这个问题，并且使用脚本很难这样做，因为当报告十进制时浏览器往往不一致/小数偏移值（特别是Firefox，IE和Chrome 所有报告表格单元格及其下一个兄弟的offsetTop的值非常不同。）

虽然我无法为您的问题提供解决方案，但希望至少我已经帮助您了解浏览器的行为方式。

如果您对问题的最终原因在于定义崩溃边界模型的方式感兴趣，那么这里有一个细节。

Section 9.7表示如果某个元素位于绝对位置，则其display设置为block，即使它是table-cell。在所有浏览器中，display的{{1}}计算th实际上是block，所以没有问题。

正如您正确指出的那样，您的表格单元格的containing block是初始包含块。这将它从通常的包含块中移除，否则它将成为表。 Section 10.6.4确实补充说，如果您的单元格没有任何指定的高度，顶部或底部偏移量，即它们都是auto，那么它应该保持在静态垂直位置并相应地进行测量。（同样地，水平位置在section 10.3.7中计算，但是因为您已经给它left: 0和width: 100px，所以它会移到左边缘，其宽度如指定的那样，排除边界。）

但这个静态垂直位置是什么？因为它通常是display: table-cell，如果它没有绝对定位，静态位置及其相应的测量值由其在表格中的位置决定。

section 17的以下小节涵盖了您给定的表格布局：

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

第17.5节说明了这一点接近底部：

collapsing borders model中的行，列，行组和列组的边缘与单元格边框居中的假想网格线重合。（因此，在这个模型中，行一起完全覆盖表格，不留任何间隙;同样适用于列。）

和

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

当然，上面已经解释了这一点。

但是如果绝对定位的表格单元格不再是单元格，what happens？

A＆＃34;缺少细胞＆＃34;行/列网格中的单元格未被元素或伪元素占用。丢失的单元格呈现为好像匿名表格单元格占据了它们在网格中的位置。

因此，虽然实际的th框绝对定位，但它会留下一个匿名的＆＃34;鬼＆＃34;单元格在其位置，以便正确呈现表格。这个匿名表格单元格为空，不继承实际表格单元格中的样式，因此它没有固有的宽度。

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

Answer 2

多行 - 试试这个css ..

<style>
.absolute {
    left: 0;
    margin-top: -1px;
    border-right:0px;
    position: absolute;
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
.absolute {
    margin-top: 0px;
} 
} 
</style>

Chrome和Firefox演示截图。

enter image description here

Answer 3

之所以发生这种情况，是因为你已经将条目指定为绝对值，这意味着firefox的浏览器样式将“top”css属性设置为1px。如果你想避免这种情况，你可以使用css重置文件，它会破坏浏览器特定的默认格式。

至于设置top：0的问题导致单元格相互折叠，这是正确的行为。绝对渲染在最接近定位的CSS元素的空间中。可以把它想象成元素不再在DOM中的通常位置。如果指定为绝对的两个单元格具有相同的最接近定位的父元素（在本例中为主体），那么它们将相对于相同的位置呈现，每个单元格具有top：0属性，这意味着它们将重叠。

我认为这两个都不错，你只是遇到浏览器风格的（常见）问题。

Answer 4

简而言之，

这个问题对我来说有两个问题

a）第一个问题是左<th>与右<th>

的重叠

正确的浏览器是覆盖<th>的浏览器，因为你是第一个给出外部div margin-right:100px; 具有aboslute属性的<th>应适合此区域，但1px的额外边框会将宽度增加2px（左边框+右边框）.Hights重叠是正确的

b）第二个问题是左边元素的上边距

可以通过添加

删除它

th{
 top:0px;
}

这是因为浏览器对html页面的影响

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

4 个答案: