具有固定布局错误的 Firefox 表

Posted 2023-03-06

【中文标题】具有固定布局错误的 Firefox 表

【英文标题】：Firefox table with fixed layout bug

【发布时间】：2011-10-15 11:29:22

【问题描述】：

Firefox 5（尚未检查其他版本）使用此代码在右列和表格边框之间添加了一个额外的空间像素：

<style type="text/css">
    table 
        border:  1px solid red;
        width: 805px;
        margin: auto;
        table-layout: fixed;
    

    td 
        border: 1px solid green;
    
</style>

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>Sun</td>
        <td>Mon</td>
        <td>Tue</td>
        <td>Wed</td>
        <td>Thu</td>
        <td>Fri</td>
        <td>Sat</td>
    </tr>
</table>

这是 Firefox 的屏幕截图和 Chrome 的屏幕截图（IE 也可以正常工作）。看看右边，你就会明白我在说什么。

如果我删除任何宽度、边距或表格布局属性，此错误就会消失。任何解决方法或修复？

【参考方案1】：

我怀疑问题与rounding of sub-pixel values 有关。

如果在table上设置width: 806px，问题就解决了，见：http://jsfiddle.net/Vfmnr/

也许知识渊博的人可以说出这是否是 Firefox 中的错误。

【讨论】：

我也注意到了，我怀疑你对舍入问题可能是正确的。

【参考方案2】：

Gecko 中的表格默认使用边框大小。所以你有一个 805px 宽的表格包括边框。这使得 803px 被划分为 7 个单元格。 803 除以 7 是 114，余数是 5。

Gecko 进行亚像素定位，特别是 Gecko 中的宽度是以 1/60 像素为单位的整数。所以每个单元格的宽度最终为 60*5/7 = 42.857 个单位。据我所知，这会被截断为 42 个单位，而不是四舍五入。当然，表格的每一列最终都是 6882 单位宽，即 114*60+42。

所以最终列宽的总和太小了 7*0.857/60 = 0.1px。

现在为什么会出现明显的接缝，我不确定。我原以为在绘画过程中四舍五入到最接近的整数像素会掩盖接缝...

【讨论】：

有趣。我将接受这一点，因为它可能不会在不久的将来得到更清晰的答案，而无需进入 Firefox 源代码或研究其他错误报告。我会留意这个问题。