Главная -> CSS -> Условные комментарии для ie6 и хаки (hacks) для СSS

Условные комментарии для ie6 и хаки (hacks) для СSS

Если вы еще не забили на отображение сайта (вашего или клиента) в Internet Explorer 6 (имеется в виду ie6, версии ниже в данной статье рассматриваться не будут), то наверняка уже сотню раз сталкивались с тем, что какой-нибудь мелкий косяк там да вылезет. Кроссбраузерная верстка, легко реализуемая в Opera, FireFox и Chrome, у вебмастеров порождает только чувство ненависти к Эксплореру, для коего приходится придумывать всякие ухищрения.

Вообщем, будьте готовы занести эту статью в закладки, ибо она будет предельно информативной и полезной:)

Итак, для получения кроссбраузерной верстки, мы можем использовать:

  1. условные комментарии
  2. хаки для CSS

Условные комментарии для IE

Условные комментарии используются для написания инструкций для Intenet Explorer (как правило просто дается ссылка на отдельный файл стилей). Код выглядит следующим образом:

Действие для IE

Например:

Обратите внимание на содержимое квадратных скобок. Там возможно использование следующих операторов с указание версии браузера:

  1. lt (less than) меньше чем
  2. lte (less than or equal) меньше или равно
  3. gt (greater than) больше чем
  4. gte (greater than or equal) больше или равно

Например:




CSS xаки для IE

Для правильного отображения в IE6 в файле стилей к требуемому элементу добавляем *html, для EI7 *+html.

Например:


*html .header {padding: 15px 0px 25px;} /* для IE6 */
*+html .header {padding: 13px 0px 22px;} /* для IE7 */

Также для IE6 срабатывает добавление нижнего подчеркивания (_), дефиса (-), двойной наклонной (//) и звездочки (*) перед свойством (я, например, чаще всего использую последний способ).

Например:


.menu {_padding: 15px 0px;}
.phone {-padding: 15px 20px;}
.footer {*padding: 20px 15px 35px;}
.content {//width: 600px;} /* Для IE 7 и ниже */

IE6 игнорирует следующие правила:

span {}
div+span {}

Например:

html>body .header {paddung: 20px 15px;}

Еще пару хаков для IE7:


*:first-child+html {} * html {} /* IE7 и ниже */
*:first-child+html {} /* только IE7 */
html>body {} /* Новые браузеры и IE7 */
html>/**/body {} /* Новые браузеры, без IE7 */
>p {} /* выбирает элемент p только в IE7 */

Ну еще один мной любимый хак !important

Пример:


p {padding-bottom: 15px !important;} /* Все браузеры кроме IE6 */
p {padding-bottom: 13px;} /* для IE6 */

Все! Этого вам более чем хватит, для кроссбраузерной верстки. Желаю удачной практики.

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.