Отдельные стили css для браузеров Internet Explorer (ie)

Любой человек создававший себе сайт, ну и конечно абсолютно любой верстальщик сталкивался и знает что браузер internet explorer (ie) читает стили как то по своему и более того очень часто версия 6 и 7 совершенно по разному отображают ваш код. По этой причине некоторым частенько приходилось переверстывать некоторые элементы или отказываться от некоторых приемов.

Еще одной причиной написать этот пост было то, что я вспомнил что уважаемый Shibaon‘чег как то давненько столкнулся с проблемкой когда все отображалось корректно, но сам код файла стилей получался невалидный,а для него это на тот момент было очень важно, как и до сих пор наверное 🙂

Кроме того это актуально еще и потому что семейство Internet Explorer до сих пор является самым часто используемым браузером, и даже так мной нелюбимый (и я думаю многими) Internet Explorer 6, который вообще читает стили как ему вздумается.

Так вот решение этих проблем довольно простое. Вы имеете возможность просто написать отдельные стили которые будут работать только в браузере internet explorer (ie)

Первым самым простым способом является возможность подключать отдельный файл стилей для всех ie либо для конкретной версии, а другие (нормальные :)) браузеры не будут читать и воспринимать этот файл.

Для всех версий IE так:

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

или наоборот ie не будет его воспринимать а остальные воспринимать что не принципиально кому как удобнее:

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

Для конкретных версий более точное условие то есть надо поставить цифру версии:

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

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

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

или наоборот так:

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

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

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

Самое интересное что таким способом можно еще и скрывать html-код как от всех версий internet explorer (ie) так и от определенной.
Например, надпись «Привет Мир» будет отображаться во всех браузерах кроме ie7, если поместить её в условие:

<![if !IE 7]>
<p>Привет Мир</p>
<![endif]>

Вот такая интересная особенность.

Далее у нас идут такие фишечки и хаки которые отлично работают но делают код не валидным, а некоторым это важно, хотя я считаю что несколько небольших ошибок обнаруженных валидатором погоды не делают:

Например если перед css свойством поставить два слеша ( // ), то это свойство будет прочитано только internet explorer (ie) всех версий, а другие его просто проигнорируют.

Для IE7 имеется хак

*:first-child+html ваш_элемент {…}

или

*+html ваш_элемент {…}

Для IE6 можно просто перед свойством использовать знак минус(-) или нижнее подчеркивание(_)

Можно еще сделать так:

* html ваш_элемент {…}

Например

div {
background: green; /* для нормальных браузеров */
//background: blue; /* для всех ie */
-background: red; /* для ie6 */
}
* html div {
background: red; /* ещё один способ для ie6, кому как удобнее 🙂 */
}

Т.е в данном примере фон (background) будет зеленого цвета в нормальных браузерах (Opera, FF), синим в IE7 и красным в IE6

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

Ну и в догонку пару хаков для других браузеров т.е не воспринимаемые IE но работающие для других

Для FireFox:

html:root ваш_элемент {…}  /* актуально и для Safari */

или

ваш_элемент, x:-moz-any-link {…}

Для Opera:

html:first-child ваш_элемент {…}

или

@media all and (min-width: 0) {
ваш_элемент {…}
}

Вот вобщем несколько приколов как справится с internet explorer пользуйтесь наздоровье 🙂