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

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.

Оцени публикацию:
  • 3,15
Оценили человек: 3
Теги : IE, CSS, hack, хаки

Похожие статьи:

Справочники и учебники:


Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

Новые заметки:

Про что мы забываем когда делаем оценку задачи по времени

Список вопросов для собеседования разработчика по телефону

Symfony2 авторизация без Doctrine2 для чайника

Phpstorm7 LiveEdit

Жесткий хабр или не хабр, тогда кто?

Яндекс.Деньги мошенничество

Как узнать какие страницы в поиске яндекса или это секрет

Последние комменты:

Yapro CMS:

Здравствуйте, Гость | Войти | Регистрация | Карта сайта | RSS ленты | Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2018 YaPro.Ru

Главная » Веб-мастеру » CSS »