Pull to refresh

Браузеры запутались в блочной модели для таблиц

Reading time 2 min
Views 9.7K
В процессе создания новой версии своего грида на JavaScript, столкнулся с не очень приятным багом. Причем там, где меньше всего ожидал…

Казалось бы, на дворе 2012 год, новые версии браузеров выпускают, чуть ли не каждый месяц, а их производители, рапортуют о внедрении даже черновиков стандартов. Как в такой ситуации можно было ожидать проблем с «древними» табличками и стилями, отвечающими за их размеры.

Похоже, производители браузеров в гонке за количеством внедренных черновиков – забыли, что стандарты нужно не только поддерживать, но и поддерживать правильно и одинаково.

Вступление


Поскольку грид решено было полностью переписать под HTML5 (отказавшись от костылей для старых версий IE и сполна заюзать новые возможности CSS3), хотелось сделать, чтобы грид выглядел одинаково во всех браузерах, и был похож на гриды в десктопном софте (без всяких скаканий шрифтов, высоты строк, инлайновым редактированием и т.п.).

Когда начал присматриваться к деталям, обратил внимание, что в Chrome строки таблиц почему-то были больше по высоте, чем в других браузерах. Решил выяснить, в чем дело.

Тестирование


Сделал небольшую тестовую страничку. На которой выводятся DIV (в качестве эталона для сравнения) и таблица в которой одна ячейка (для нашего теста более чем достаточно).

У блока DIV и ячейки таблицы TD выставляем в CSS одинаковые размеры и границу побольше, для наглядности.
div, td{
	width:100px;
	height:100px;
	border:25px solid #333;
}

У самой таблицы границу убираем. Все margin и padding обнуляем, cellspacing тоже (свойство border-collapse пробовал – результат аналогичный).

На странице расположены 4 примера, со стандартной блочной моделью (content-box) и с использованием box-sizing: border-box, а также с прописанной шириной у таблицы и без неё (оказалось, тут тоже, у браузеров нет единого мнения).

В тестировании приняли участие последние релизы основных браузеров:
  • Chrome 16
  • Firefox 9.0.1
  • Internet Explorer 9
  • Opera 11.61

Тест проводился на Windows 7 x64.

Результаты


Для удобства анализа результатов свёл скриншоты браузеров в одну картинку (кликабельна).


Как видим самый близкий результат рендеринга показан, когда включена блочная модель border–box и задана ширина у таблицы. В таком случае получаем одинаковый рендеринг в 3 браузерах из 4. Как раз всплыл тот самый баг Chrome из-за которого, я начал этот разбор полетов.

В стандартной же для W3C блочной модели браузеры поделились на пары. Причем, что интересно рендеринг в content-box совпадает у Chrome и IE9, а в border-box уже идентичную «картинку» выдают IE9 и Opera.

Также отметим, что IE9 и Opera уже используют свойство box-sizing без префиксов, в отличии от Chrome и FireFox.

Заключение


Как с этим бороться пока оптимального решения не нашел, ограничился костылем для Chrome. Для него ставится меньше высота ячеек.

У кого стоят dev-сборки браузеров отписывайтесь в комментариях, как они себя ведут.
Тестовая страница здесь.
Tags:
Hubs:
+75
Comments 109
Comments Comments 109

Articles