Пишем хаки для Internet Explorer.

Статьи

Пишем хаки для Internet Explorer

Написание хаков — это вынужденная мера веб-мастера, который стремиться к одинаковому отображению сайта в разных браузерах — кроссбраузерной совместимости. Чаще всего возникает проблема с неправильным отображением каких-либо элементов сайта при блочной верстке в Internet Explorer.

У начинающих сайтостроителей сайт может отображаться криво в Internet Explorer (в дальнейшем IE) по причине их собственных ошибок в верстке, игнорирования декларации DOCTYPE. Однако у самого браузера есть множество собственных ошибок в поддержке стандартов спецификации CSS2. То есть те правила, которые «понимают» браузеры Opera и FireFox, «не понимает» IE или понимает их по-своему.

В этом случае проблема решается двумя способами:

1. добавление условных комментариев и альтернативной таблицы стилей для IE, в которой будут добавлены правила, необходимые для нормального отображения сайта IE (при этом браузеры Opera и FireFox будут их игнорировать).

2. добавление правил в единую таблицу стилей таким образом, чтобы их понимал только IE — это так называемые CSS-хаки или трюки.

Рассмотрим подробнее каждый способ.

1. В теге head в HTML добавляем комментарий

Все правила, которые созданы в таблице стилей 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:

*+html #block
{
padding: 30px 0;
}

Этот метод хорош и тем, что CSS-валидатор этот трюк не принимает за ошибку.

Есть так же другой способ, который работает для шестой версии IE.

#block
{
_padding: 30px 0;
}

Правда, в этом случае валидатор считает такой код за ошибку.

Каждый веб-мастер выбирает наиболее приемлемый для него способ. Если верстка сложная и требует большого количества хаков для IE, то выбор отдельной таблицы стилей — разумное решение. Если нужно добавить буквально пару строчек для IE, тогда проще воспользоваться вторым способом.

Статьи

Блочная верстка сайтов

Контент для сайта

Реклама