Html 绝对定位表格标题（th）-哪个浏览器错误？

Firefox（和IE）与Chrome（和其他基于Webkit的浏览器）相比，具有一个绝对定位列的简单表格呈现方式不同：

为什么会有区别？哪个浏览器错误（根据标准）？如何在不删除行

border collapse:collapse

的情况下在所有浏览器上修复此问题

---

编辑：正如@urzeit所指出的，“如果您指定

top:0；

firefox中的输出与chrome中的相同。”但是，有两个问题：第一，多行，

top:0将它们全部折叠为一个；其次，绝对定位列的右边缘延伸了一个像素太远。您可以在上看到这两个问题。
发生这种情况的原因是您将条目指定为绝对值，这意味着正在使用firefox的浏览器样式，它将“top”css属性设置为1px。如果您想避免这种情况，您可以使用css重置文件，该文件将清除特定于浏览器的默认格式

至于设置top:0导致单元格相互折叠的问题，这是正确的行为。绝对渲染在最近定位的CSS元素的空间中。将其视为元素不再位于DOM中通常的位置。如果指定为绝对的两个单元格具有相同的最近位置父元素（在本例中为主体），则它们都将相对于同一位置进行渲染，每个单元格都具有top:0属性，这意味着它们将重叠

我不认为两者都是错的，你只是遇到了浏览器风格的（常见）问题。
这是由取整问题引起的，取整问题在不同浏览器之间往往不一致，可能与困扰背景偏移、百分比计算等问题相同

简言之，正如您可能已经猜到的，舍入问题产生的原因在于，它描述了正在崩溃的边界模型：

边框以单元格之间的网格线为中心。对于奇数个离散单元（屏幕像素、打印机点），用户代理必须找到一致的舍入规则

以及：

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

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

不幸的是，由于这是一个舍入问题，除非通过令人难以置信的复杂黑客手段，否则不可能使用纯CSS解决这个问题，而且使用脚本很难做到这一点，因为浏览器在报告小数/小数偏移量值时往往不一致（特别是，Firefox、IE和Chrome都报告了表单元格及其下一个同级单元格的
offsetTop
的不同值）

虽然我不能为您的问题提供解决方案，但希望至少我已经帮助您理解了为什么浏览器会以这种方式运行


如果您感兴趣的是为什么问题最终存在于崩溃边界模型的定义方式中，那么下面是问题的实质

说明如果元素绝对定位，则其
显示
设置为
块
，即使它本来是一个
表格单元格
。在所有浏览器中，该
的计算
显示
实际上是
块
，因此没有问题

正如您正确指出的，表格单元格的顶部是初始的包含块。这会将其从通常的包含块（否则就是表格）中删除。是否添加了这样一点：如果单元格没有任何指定的高度、顶部或底部偏移，即它们都是
自动的
，那么它应该保持在其静态垂直位置l位置和相应的测量值。（同样，水平位置也在中进行了说明，但是，由于您已为其指定了
左：0
和
宽度：100px
，因此它会移动到左边缘，其宽度符合规定，不包括边界。）

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

您给定的表格布局包含在以下小节中：






第17节详细描述了表格、标题、表格行和表格单元格的布局方式。其中许多内容基于HTML，某些部分由于各种原因而模糊不清和/或未定义。不过，固定表格布局的定义非常明确，在本例中甚至不相关

第17.5节在底部说：

中的行、列、行组和列组的边缘与假设的网格线重合，单元格的边界位于这些网格线的中心。（因此，在此模型中，行一起完全覆盖表格，不留任何间隙；列也是如此。）

以及：

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

当然，上面已经解释过了

但如果绝对定位的表格单元格不再是单元格

“缺少单元格”是/c行中的单元格
<div>
    <table>
        <tr>
            <th class="absolute">&nbsp;</th>
            <th>&nbsp;</th>
        </tr>
    </table>
</div>

<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>

th{
 top:0px;
}