Условные комментарии используются для написания специальных инструкций которые будут работать только в 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

Поделись с друзьями:

  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Add to favorites
  • DZone
  • email
  • FriendFeed
  • LinkedIn
  • MySpace
  • Netvibes
  • Reddit
  • RSS
  • StumbleUpon
  • Technorati
  • Tumblr
  • Twitter

29 комментариев к статье «Условные комментарии для IE»:

  1. [...] полезные статьи и поднимаемые темы. Например, о синтаксисе комментариев в IE, где, оказывается, можно даже строить [...]

  2. Полезно для начинающих – спасибо.

  3. Alex:

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

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

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

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

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

  6. Alex:

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

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

    Удачи

  7. Сергей:

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

  8. Alex:

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

  9. Kozlovski:

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

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

  10. Kozlovski:

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

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


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


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

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

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

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

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

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

  12. Alex:

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

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

  14. У условных комментариев есть еще такая конструкция:
    HTML
    Подробней о фокусе с ней можно прочитать в:
    http://zodios.net/htmlcss/ifcomments.html

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

  16. Kozlovski:

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

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

    либо

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

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

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

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

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

  21. 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 выдавать, для каждого браузера свой.

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

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

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

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

  25. Shold:

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

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

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

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

Оставь комментарий: