html - 具有固定布局错误的 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。所以你有一个 805 像素宽的表格，包括边框。这留下 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。

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