Стили css internet explorer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для FireFox:

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

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

Комментарии

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

Здравствуйте. Столкнулся с проблемой.
Нужно для IE9 поставить margin: 0 21px 0.3em 22px;
А для всех остальных margin: -1em 21px 0.3em 22px; Пытался ставить некоторыми способами что описаны выше, то ничего не работает. и почему IE9 не хочет читать .css подключенный отдельно для него (

vov41k говорит:
Здравствуйте.
Столкнулся с проблемой.
Нужно для IE9 поставить margin: 0 21px 0.3em 22px;
А для всех остальных margin: -1em 21px 0.3em 22px;
Пытался ставить некоторыми способами что описаны выше, то ничего не работает. и почему IE9 не хочет читать .css подключенный отдельно для него (

Источник

CSS хаки

Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично.

Хак — исправление ошибки или добавление новой функции посредством использования другой недокументированной или некорректно реализованной особенности. (с) Lurkmore

Грязный хак — это быстрое решение какой-либо проблемы, в основном в краткосрочной перспективе, лишающее сущность код внутренней красоты и дисгармонирующее с её внутренним устройством. (с) Lurkmore

CSS-хаки для браузера Internet Explorer

PNG в IE6 :
Для IE6 подключается htc-файл iepngfix.htc, для правильной работы фоновых изображений формата PNG для всех элeментов, в файле cssf-ie6.css. Используется IE PNG Fix v1.0 RC4 последней версии.

html>body .class < >head+body .class < >html:first-child .class

*|html .class < >html:not([lang*=""]) .class

Conditional comments в IE :
Условные комментарии работают только в IE под Windows, для других браузеров они являются обычными комментариями, поэтому их можно безболезненно использовать. Синтаксис такой: