Firefox 3.6.12 vs CSS box-model

С тех пор как я обновил FF до 3.6.12 (или, по крайней мере, когда я заметил проблему), я имею дело с необычной ситуацией. Хотя Chrome и Opera используют модель окна content-box, Firefox, похоже, начал использовать border-box. Прямо сейчас я рисую несколько заголовков таблицы высотой 39 пикселей и 1px-границей внизу (общая высота: 40 пикселей).

Он отображает ОК везде, сохраняя FF, где поле содержимого имеет высоту 38 пикселей.

Если он используется, я нахожусь на Windows 7 Professional 32 бит, но также заметил это на моем компьютере коллеги (Windows XP Professional).

Мой CSS (упрощенный для читаемости) - это только это, ничего фантастического:

table { border-spacing: 3px; }
table tr th { height: 39px; border-bottom: 1px solid red; }

Установка явной формы в ящик для содержимого не влияет, как если бы рамка была установлена внутри с помощью !important... (вроде того, что делает Chrome с фоном поля формы автозаполнения)

Эта разница в 1 пиксель не является чем-то, что отделяет мой стиль (я не делаю его идеальным для пикселя), но я все еще очень расстроен из-за того, что мой FF меняет свое поведение. Итак, мои вопросы:

Случается ли это в вашем случае? (если нет, возможно, это ошибка в моем CSS)
Если да, то команда FF решила пойти против W3C и изменить коробку-модель по умолчанию?
Если да, знаете ли вы, почему и где я могу найти информацию об этом (Google отказался помочь)?

Ответ 1

Хорошо, пользовательский лист стилей пользователя arcana подходит вам по пути:

по какой-то причине FF устанавливает table { -moz-box-sizing: border-box } в таблицу стилей по умолчанию. Как и IE8 (но не 7). В других браузерах используется значение по умолчанию box-sizing: box-content. Я понятия не имею, почему FF сделал это, против значения defaul W3C. там долгая дискуссия об этом здесь: Почему размер окна установлен в рамку для таблиц в Firefox?.

чтобы переопределить его, используйте префикс -moz: i.e. table { -moz-box-sizing: content-box }

Ответ 2

Возможно, инвертирование проблемы будет хорошим решением: просто попробуйте border-box во всех случаях!

table tr th
{
    height: 40px;
    border-bottom: 1px solid red;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Ответ 3

ОК, поэтому я сделал несколько тестов на этом, все TR имеют одинаковую высоту в Chrome 8, Opera 11 и Firefox 4.

Firefox 4pre8

Chrome 8

Opera 11

В Opera и Firefox TH имеет высоту 38px вместо 39px, кажется, что в WebKit есть ошибка, которая сообщает о неправильной высоте на TH, при этом применяя те же правила, что и другие два браузера.

И быстрое наложение трех разных визуализаций показало, что нет никакой разницы, кроме текста и ширины:

Вы действительно сделали графический тест? Просто слепое доверие к инструментам может вводить в заблуждение.