Условные стили и хаки для IE6. Что использовать и как

Нет такого 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]-->

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

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

6. Подгружаем стили для 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]-->

7. Подгружаем стили для 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]-->

8. Подгружаем стили для 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]-->

9. Подгружаем стили для 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]-->

10. Подгружаем стили для 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]-->

11. Подгружаем стили для 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

#div {
_height: 300px;
}

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

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

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

Перевод: Ефимов Виктор
Оригинал: css-tricks.com