В 2007 году издана книга известного веб-дизайнера Артемия. Пишем хаки для Internet Explorer
Написание хаков — это вынужденная мера веб-мастера, который стремиться к одинаковому отображению сайта в разных браузерах — кроссбраузерной совместимости. Чаще всего возникает проблема с неправильным отображением каких-либо элементов сайта при блочной верстке в Internet Explorer.
У начинающих сайтостроителей сайт может отображаться криво в Internet Explorer (в дальнейшем IE) по причине их собственных ошибок в верстке, игнорирования декларации DOCTYPE. Однако у самого браузера есть множество собственных ошибок в поддержке стандартов спецификации CSS2. То есть те правила, которые «понимают» браузеры Opera и FireFox, «не понимает» IE или понимает их по-своему.
В этом случае проблема решается двумя способами:
1. добавление условных комментариев и альтернативной таблицы стилей для IE, в которой будут добавлены правила, необходимые для нормального отображения сайта IE (при этом браузеры Opera и FireFox будут их игнорировать).
2. добавление правил в единую таблицу стилей таким образом, чтобы их понимал только IE — это так называемые CSS-хаки или трюки.
Рассмотрим подробнее каждый способ.
1. В теге head в HTML добавляем комментарий
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
Все правила, которые созданы в таблице стилей ie.css, будут учитываться IE 7 и более ранними версиями.
Важно! Обратите внимание на содержание в квадратных скобках — [if lte IE 7], где lte значит «меньше или эквивалентно», т.е. комментарий будет работать для IE 7 и более ранних версий.
Вместо lte можно добавлять lt — в этом случае комментарий будет работать для более версий, которые вышли раньше IE 7.
Применение gte означает, что правила будут работать для IE 7 и более поздних версий.
Применение gt означает, что правила будут работать только для версий, которые выйдут после IE 7.
Мы так же можем использовать запись [if IE 7], которую будет слушать только IE 7.
Таким образом, инструкцию для IE мы оформляем как обычный комментарий <!–– ––>, но добавление в нее [if IE 7] делает его уникальным — видимым для IE и невидимым для других браузеров. Поэтому такой комментарий получил название условного.
2. Второй способ позволяет обходиться без отдельной таблицы стилей.
Для шестой версии IE к элементу, значения которого нуждаются в корректировке, нужно добавить *html
* html #block
{
padding: 30px 0;
}
Чтобы правило работало и для седьмой версии IE:
*+html #block
{
padding: 30px 0;
}
Этот метод хорош и тем, что CSS-валидатор этот трюк не принимает за ошибку.
Есть так же другой способ, который работает для шестой версии IE.
#block
{
_padding: 30px 0;
}
Этот метод хорош и тем, что CSS-валидатор этот трюк не принимает за ошибку.
Правда, в этом случае валидатор считает такой код за ошибку.
Каждый веб-мастер выбирает наиболее приемлемый для него способ. Если верстка сложная и требует большого количества хаков для IE, то выбор отдельной таблицы стилей — разумное решение. Если нужно добавить буквально пару строчек для IE, тогда проще воспользоваться вторым способом.
- Какой стандарт предпочтительнее выбрать при создании нового сайта? Отличия XHTML от HTML.
- Web-студии и web-стандарты — две вещи несовместные?
- Филоcофия CSS-дизайна. Об удивительной технологии CSS.
- Почему XHTML+CSS? 15 доводов в пользу перехода на XHTML+CSS.
- Зачем нужна печатная версия сайта. Как создать печатную CSS-версию?