Условные стили и хаки для IE6

[arman29]

Нет такого web-разработчика, который бы не сталкивался с проблемами в IE6. Однако, если вы хотите называть себя профессионалом, вы должны быть в состоянии справиться с ними.

Я придерживаюсь того мнения, что для решения проблем с IE нежелательно использовать хаки. Они неприемлемы, поскольку они основаны на нестандартных решениях, а, следовательно, вы не можете предсказать, как они поведут себя в новых версиях браузеров. Полнофункциональным решением при борьбе с некорректным отображением в IE6 является использование условных стилей. Тем более, что условные стили поддерживает вся линейка интернет-эксплореров, вплоть до IE 8, и с их помощью можно написать стиль для любой версии этого браузера или для нескольких версий одновременно.

Зачем использовать условные стили?

1. Если у вас есть проблема отображения, её обязательно нужно исправить
2. Использование условных стилей поможет вам исправить проблемы с IE не прибегая к хакам, оставляя ваш код чистым
3. Использование этой техники одобрено Microsoft

Кстати, условные стили не обязательно должны базироваться только на CSS, вы можете также подгружать различные стили для различных браузеров при помощи JavaScript.

Примеры использования условных стилей

1. Подгружаем стили для всех версий IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

2. Прячем стили от всех версий IE

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

3. Подгружаем стили только для IE7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

4. Подгружаем стили только для IE6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

5. Подгружаем стили только для IE5

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

6. Подгружаем стили только для IE5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

7. Подгружаем стили для IE6 и ниже

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

8. Подгружаем стили для IE7 и ниже

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

9. Подгружаем стили для IE8 и ниже

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

10. Подгружаем стили для IE6 и выше

<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />/
<![endif]-->

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

11. Подгружаем стили для IE7 и выше

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

12. Подгружаем стили для IE8 и выше

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

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

Стиль только для IE7

* html #div {
height: 300px;
}

Стиль только для IE7

* html #div {
height: 300px;
}

Скрыть стиль от IE7

#div {
_height: 300px;
}

Скрыть стиль от IE6 и ниже

#div {
height/**/: 300px;
}

html > body #div {
height: 300px;
}

Перевод: efimov.ws
Оригинал: css-tricks.com

 

[duncan]

хак, например, min-height
для IE6:

#div{ min-height:400px;}
#div{ -height: 400px;}

 

[bifot]

В ИЕ при клике на ссылку, во время клика появляется серый фон. Он совершенно не вписывается в дизайн.
Чтобы было понятнее, вот скрин:

Решается он легко, одной строчкой:

a { background: none; }

 

[xotox]

да зубудьте вы уже о таких браузерах как ie6-8, их уже давно никто не использует, что голову ломать и выдумывать хаки, лучше html5 и css3 изучайте и пользуйтесь всеми преимуществами данных возможностей

 

[DevOrc]

Немаловажное уточнение, эти условные стили не работают начиная с IE10
Для просмотра ссылки Войди или Зарегистрируйся

 

[snooper]

да зубудьте вы уже о таких браузерах как ie6-8, их уже давно никто не использует, что голову ломать и выдумывать хаки, лучше html5 и css3 изучайте и пользуйтесь всеми преимуществами данных возможностей

я тебя огорчу, используют.
Иногда имею верстку из-за бугра, так они там все на старых ИЕ версиях. Почему, казалось бы. А ответ прост. Они не покупают на офисы, и даже домой новые версии софта мелкомягких, а юзают старые версии, Хря, 2003 офис и так далее, а зачем тратить лишние деньги?. Ну и так как у нас не юзают на лево и право пиратский софт, это для них дико.
По этому верстка под ИЕ 4+ ещё долго будет актуальной, как минимум для бугра, ну и платят они между прочим хорошо за эти "костыли"