Условные комментарии в Internet Explorer

Автор: Aport Вторник, Январь 27th, 2015 Нет комментариев

Рубрика: Разное

Internet Explorer не понимает Ваш CSS3 со всеми передовыми фишками? Вам нужен какой-то метод лечения? Используйте условные комментарии на Ваших проектах, с помощью которых, Вы сможете указать всей линейке браузера IE или каждой его версии по отдельности, свои стили CSS.

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

Данные комментарии включаются в HTML-страницу и выглядят следующим образом:

Пример 1.

Можно сразу в комментариях прописать определенные CSS-правила для Internet Explorer, еслисайт источник http://yapro.ru Sun Feb 20 2011 21:04:56 GMT+0300 этих правил немного:

<!--[if IE]>

<style type="text/css">
#container {
width:100%;
margin:0 auto;
padding:0;
}
</style>

<![endif]-->

Пример 2.

Если же у вас получился большой листинг, Вам будет проще создать отдельный CSS-файл и в условных комментариях сослаться на него:

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

<![endif]-->

Таким образом, когда пользователь зашел на Ваш сайт с Internet Explorer-а (любой версии), все стили будут подгружаться с указанного в условных комментариях CSS-файла (Пример 2) или будет руководствоваться теми правилами, которые прописаны в комментариях (Пример 1).

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

Наверное, Вас интересует вопрос: “а можно ли для определенной версии IE прописать свои стили?“. Естественно!

Пример 3.

Указываем правила только для Internet Explorer 8:

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

<![endif]-->

Пример 4.

Указываем правила только для Internet Explorer 7:

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

<![endif]-->

Пример 5.

Указываем правила только для Internet Explorer 6:

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

<![endif]-->

Ниже, я думаю, опускаться не имеет смысла. Предполагаю, чтосайт источник http://yapro.ru Sun Feb 20 2011 21:05:00 GMT+0300 тактика понятна.

Операторы условных комментариев

Также можно использовать специальные операторы в комментариях:

  • lt – ниже;
  • gt – выше;
  • lte – ниже или равно;
  • gte – выше или равно;
  • ! – отрицательный оператор.

Примеры операторов

Пример 6.

Правила сработают для всех версий IE, которые ниже 6-й версии:

<!--[if lt IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />

<![endif]-->

Пример 7.

Правила сработают для всех версий IE, которые выше 6-й версии:

<!--[if gt IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />

<![endif]-->

Пример 8.

Правила сработают для 6-й версии IE и всех, что ниже:

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />

<![endif]-->

Пример 9.

Правила сработают для 6-й версии IE и сайт источник http://yapro.ru Sun Feb 20 2011 21:05:05 GMT+0300всех, что выше:

<!--[if gte IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />

<![endif]-->

Пример 10.

Правила сработают для всех, кроме 6-й версии IE:

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

<![endif]-->

Другие возможности

С помощью данных комментариев можно не только указывать собственные стили для IE, но и выводить блоки или сообщения для пользователей Internet Explorer.

 

Источник: yapro.ru

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

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты