Firefox表具有固定的布局错误

Question

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也正常工作）。看看右边，你会看到我在说什么。

如果删除任何宽度，边距或表布局属性，则此错误消失。任何变通方法或修复方法？

Answer 1

Gecko中的表默认使用border-box box-sizing。所以你有一个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。

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

Answer 2

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

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

也许更有知识的人可以说这是否是Firefox中的错误。