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中的表默认使用边框框大小调整.所以你有一个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.

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