Таблица 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 по умолчанию используют размер рамки для рамки. Таким образом, у вас есть таблица шириной 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,1 пикс.

Теперь, почему это заканчивается видимым швом, я не уверен. Я бы подумал, что округление до ближайшего целого пикселя во время рисования покрыло бы шов ...

Answer 2

Я подозреваю, что проблема связана с округлением значений субпикселя .

Если вы установите width: 806px на table, проблема будет решена, см .: http://jsfiddle.net/Vfmnr/

Может быть, кто-то более знающий может сказать, является ли это ошибкой в ​​Firefox.