Поддержка CSS браузерами
Наиболее полно поддерживающими стандарт CSS являются браузеры, работающие на Gecko (Mozilla Firefox и др.) и WebKit (Arora, Google Chrome, Safari), а также браузер Opera. К сожалению, самый распространенный на данный момент браузер Internet Explorer 6 поддерживает CSS далеко не полностью. Вышедший спустя 7 лет после своего предшественника Internet Explorer 7 хотя и значительно улучшил уровень поддержки CSS, но всё ещё содержит значительное количество ошибок. В Internet Explorer 8 используется новый движок, который полностью поддерживает CSS 2.1 и частично – CSS 3.
Для проверки поддержки браузером различных частей стандарта CSS был разработан тест «Acid». Его вторая версия называется «Acid2», а третья, соответственно, «Acid3»
Различные блоковые модели
В стандартах CSS от консорциума W3C используется модель, в которой свойство
width определяет ширину содержимого блока, не включая в нее отступы и рамки. Ранние версии Internet Explorer (4 и 5), реализовали собственную модель, в которой width определяет расстояние между рамками блока, включая отступы (
padding) и рамки (
border). Кроме Internet Explorer 5 эту модель так же понимают браузеры Netscape 4 и Opera 7. Поддержка стандартной модели W3C появилась в IE только в шестой версии.
В разрабатываемом стандарте CSS3 для решения этой проблемы введено свойство
box-sizing, со значениями
content-box для указания на использование стандартной модели W3C и
border-box для использования модели IE 5.
В браузере Mozilla, при поддержке этого свойства, под собственным «рабочим» названием
-moz-box-sizing, ввели еще одно значение —
padding-box, таким образом создав третью блочную модель, в которой
width это размер содержимого и отступов блока, не включая рамки.
CSS-фильтры
Различия в реализации CSS различными браузерами заставляют веб-разработчиков искать решения, как заставить все браузеры отображать страницу одинаково. CSS-фильтры (также часто называемые CSS-хаками) позволяют выборочно применять (или не применять) стили к различным элементам. Например, известно, что Internet Explorer 6 применяет правила, использующие селекторы вида
* html селектор (фильтр, известный как «star html bug»). Тогда, чтобы заставить и браузеры, использующие блоковую модель W3C и IE, работающего в Quirks mode со своей блоковой моделью, отображать блок
#someblock шириной в 100 пикселей и внутренними отступами в 10 пикселей можно написать такой код:
/* Модель W3C - 80px ширина содержимого и 10px отступы с каждой стороны */
#someblock {width: 80px; padding: 10px; } /* Следующее правило применит только IE6. */
* html #someblock {width: 100px; padding: 10px; }
Ещё одним способом выборочного применения правил для Internet Explorer являются условные комментарии.
Подробнее о том, как достигается
кроссбраузерность CSS — тут.