Firefox 3.6.12 против CSS блочной модели

Question

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

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

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

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

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

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

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

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

Answer 1

ОК, таблица стилей User Agent скоро появится:

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

, используйте префикс -moz: т.е. table { -moz-box-sizing: content-box }

Answer 2

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

Firefox 4pre8

Chrome 8

Опера 11

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

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

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

Answer 3

Возможно, решение проблемы будет хорошим решением: просто попробуйте 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;
}