CSS практик

CSS. IE хаки

Posted by: fxix on: Октябрь 23, 2008

1. Все хаки для IE добавляем в отдельные файлы для IE. Эти файлы подцепляются обычно с помощью условных комментариев. В этом подходе есть плюсы – css остается валидным.  Но, мне больше нравится, когда весь код, относящийся к элементу собран в одном месте. Есть простой способ выделить версии ie в css-файлах. Суть его в том, что перед свойством ставятся символы, игнорируемые отдельными версиями IE:

1. //width:100px; – так написаное свойство проигнорируют все браузеры кроме IE  7.0 и меньше.
2. _width:100px; – видят только IE 6.0 и меньше. IE7 не воспримет.
3. \\width:100px; – видят только IE 5.0 и IE 5.5

Например, нам надо сделать плавающий блок с марджином 10% слева, шириной контентной части 100px и паддингом 20px. Следующий пример будет отображаться одинаково во всех браузерах:
.left {

width:100px;

padding:10px;

margin-left:10%;

_margin-left:5%;

\\width:120px;

}

Поскольку IE 6 и ниже неправильно расчитывают марджины у плавающих блоков, мы задаём отдельное значение для них(_margin-left:5%). В IE 5 и IE 5.5 неправильная box-модель – правим свойством \\width:120px.

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

Вот примеры хаков IE для свойства height:

1. * height: 10px; /* этот CSS хак увидит только IE */

2. _height: 10px; /* эту инструкцию воспримут только IE 5.5 и IE 6.0 */

3. _heig\ht: 10px; /* а этот CSS хак увидит только IE 6.0 */

На самом деле CSS хаки это плохо, так как код не проходит валидацию. Если Вам хочется, чтобы код был валидным, используйте условные комментарии.

3.  Если для IE6 многие вебмастера используют css-хак:

*html тэг {}

то в IE7 он уже не работает. Забавно другое – оказывается, Майкрософт особо не утруждала себя переделкой браузера и фактически оставила без изменений сам «движок». Поэтому отображение страниц в браузерах этих версий требует тех же самых изменений, по сравнению с нормальными браузерами.

Небольшой поиск в Интернете вывел меня на один замечательный css-хак, который работает только в IE7:

*+html тэг {}

4. Лишние отступы под изображениями в IE6,7
решение -
img {
vertical-align: top;
}

Метки: ,