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

Условные комментарии используются для написания специальных инструкций которые будут работать только в Internet Explorer не ниже 5-ой версии.

Условный комментарий выглядит следующим образом:

<!­­--[if IE]> Специальные инструкции для IE здесь. <![endif]-->

Структура похожа на обычный комментарий в HTML, поэтому остальные браузеры будут воспринимать его как обычный комментарий. Explorer распознаёт специальный синтаксис <!--[if IE]>, решает условие if и парсит содержимое условного комментария так, как если бы это было содержание нормальной страницы. Условные комментарии используют синтаксис HTML комментариев, поэтому они могут быть включены только в HTML страницу. Удобно бывает сделать отдельные стили для IE и вставить тег link в условный комментарий.

Ниже написаны несколько условных комментариев, которые показывают версию Internet Explorer, которую вы используете.

<!--[if IE]> Инструкции для Internet Explorer <![endif]-->
<!--[if IE 5]> Инструкции для IE 5 <![endif]-->
<!--[if IE 5.0]> Инструкции для IE 5.0 <![endif]-->
<!--[if IE 5.5]> Инструкции для IE 5.5 <![endif]-->
<!--[if IE 6]> Инструкции для IE 6 <![endif]-->
<!--[if IE 7]> Инструкции для IE 7 <![endif]-->

В условных комментариях можно использовать операторы, с помощью которых можно задать более комплексное условие. В таблице ниже приведены все операторы.

Оператор Описание
lt меньше чем
lte меньше или равно
gt больше чем
gte больше или равно

И несколько примеров:

<!--[if ! IE 5]> Инструкции для  IE 5.5, 6 или 7 <![endif]-->
<!--[if gt IE 5.0]> Инструкции для IE 5.5, 6 или 7 <![endif]-->
<!--[if lte IE 5.5]> Инструкции для IE 5.0 или 5.5 <![endif]-->
<!--[if gte IE 6]> Инструкции для IE 6 или 7 <![endif]-->
<!--[if lt IE 7]> Инструкции для IE 5.0, 5.5 или 6 <![endif]-->

По материалам Условные комментарии в CSS и Использование условных комментариев в IE

Обсуждение:

  1. Alex

    Рад, что пригодилось. Заходите, будет еще много интересного.

  2. Лёха

    Здравствуйте, может подскажете, почему вот этот код

    #general {width: expression(((document.documentElement.clientWidth || document.body.clientWidth)

    в ИЕ 6 открывает панель информации со словами IE заблокировал активное содержимое.
    Этим кодом хочу ограничить ширину div#general, то что в других браузерах делает min-width.
    Или подскажите другой способ это сделать, только чтобы код оставался валидным и css тоже ;)

  3. Alex

    Леха, в IE6 и ниже использование expression будет вызывать информационную панель, т.к. это javascript и при этом код будет не валидным, причем если в браузере поддержка скриптов отключена, то это не сработает (подробнее здесь).

    Также есть варианты без использования expression, используя обертывающие div и отрицательные отступы. Посмотри здесь и здесь.

    Удачи

  4. Сергей

    Сколько не изголялся с условными комментариями, но они у меня реально не работают ни в одном из вариантов. Синтаксис проверял, даже просто ваш копировал. Но, тем не менее, IE6 и IE7 на них не реагируют совсем. В чем может быть дело?

  5. Alex

    Сергей, можете показать ваш код?

  6. Kozlovski

    Должен работать в ie 6 и ниже, но срабатывает не во всех случаях (стоит 5 машин, на 2-х не работает).

    Так работает во всех ie-шках, что нехорошо, т.к. в ie 7 выскакивает ошибка.

  7. Kozlovski

    Странная вещь, проверил свою ie с помощью

    Тестовая фраза, без условных комментариев


    Текст для любого браузера кроме IE


    Текст для любого браузера и IE 7+

    и вот что она выдала

    «Тестовая фраза, без условных комментариев
    Текст для любой версии IE
    Текст для IE 7
    Текст для любого браузера и IE 7+»

    какая то странная IE-шка.

    Причем «Version: 6.0.2900.2180.xpsp_sp2_rtm.040803-2158″

  8. Аргос

    Спасибо, надо будет опробовать.
    *html в 7 уже не работает?

  9. Alex

    Для IE7 можно использовать *+html

  10. Влад

    Только в ИЕ 7. В других браузерках будет отображаться некорректно или не будет отображаться вообще?

  11. А как сделать, если надо чтобы часть свойств в файле *.css читал только IE?
    Правильно ли так: //display: inline; ?
    FF и Opera приинмают // за комментарий, а IE читает.

  12. Kozlovski

    ПРЕДПРИНИМАТЕЛЬ, впервые слышу, о таком варварском хаке :) , вот вам верные:

    .class {margin:0px; (для всех) *margin:10px; (для IE6,7) _margin:20px; (для IE6)}

    либо

    *html .class {свойства} — только для IE

  13. Александр

    спасибо за информацию, помогла справиться с проблемой корректного вывода PNG в старых версиях IE

  14. SOKOJI

    Спасибо большое, очень рад что нашел эту запись, а то никак не мог вспомнить эти if[IE]. Сидел до этого и гадал над синтаксисом этим :D
    Еще раз спасибо. А блог добавлю в избранное, много для себя полезного я нашел :)

  15. English

    Большое спасибо за статью, как раз искал условные комментарии отностиельно IE 5.0 =)

  16. Novus

    Спасибо. Хорошая статья. Очень полезна информация при создании сайтов. Но в принципе можно было бы боле полно раскрыть тему (примеры привестти :)

  17. Dmitry

    А есть оператор «else»?

    Например:
    ………………………..

    <link ….1.css>

    <!—[if IE]> <link ….2.css> <![endif]—>

    ………………………..

    IE сначала загрузит 1.css, а затем 2.css?

    • Alex

      Загрузка происходит в соответствии с расположением в документе. IE в данном случае начнёт загружать сначала 1.css, а после 2.css

      • Dmitry

        т.е. загружается 1.css, затем 2.css и стили приплюсовываются друг к другу, а те свойства, что одинаковы, заменяются из 2.css. Хотелось с помощью 2.css удалить свойство из 1.css, но видать придётся скриптом css выдавать, для каждого браузера свой.

  18. Kosmo

    спасибо, статья очень пригодилась!
    Только у меня ослик 8, для него есть особые комментарии?

  19. Евгений

    Помогите пожалуйста у меня проблема с отображением во всех IE и maxthon.
    Я не профи в CSS но понимаю что шаблон моего сайта http://www.pg-tur.ru просто не подогнан под данные браузеры. Сам пользуюсь Опера или Фоксом с ними все ок. Если можно подскажите почему

    не робит как надо?

  20. Александр

    Спасибо, полезная фича! Будем юзать. Особенно понравились «условные комментарии, с помощью которых можно задать более комплексное условие»

  21. Shold

    Специальные инструкции для IE здесь.

    Должно быть 2 тире в начале…

    <!—[if IE]> Специальные инструкции для IE здесь. <![endif]—>

    Так правильно.

      • Николай

        Специальные инструкции для IE здесь.
        В статье один, тоже попался

  22. Вот за это спасибо! Были проблемы с отображением на сайте в ie, все исправил, стало как нужно.

  23. Mizar

    A как все ети условия прописать для других програм: Mozilla Firefox, Google Chrome, Opera?

    • Alex

      Для других браузеров подобного инструмента к сожалению нет.

    • Andrey

      Firefox поддерживает условный коментарий if FF.

      • Alex

        А можно ссылочку с подтверждением.

  24. wed

    кто сейчас юзает IE ниже пятой версии?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*