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;
}