CSS стили для Internet Explorer для ie6 разделение браузеров

CSS стили персонально для IEСовременные браузеры все , в той или иной мере, одинаково поддерживают каскадные таблицы стилей. Какой браузер выделяется из плеяды актуальных браузеров, так это Internet Explorer, производства компании Microsoft. Веб дизайнеру постоянно приходится что-то дописывать персонально для IE. По-этому, рано или поздно, возникает вопрос : как дополнить стандартные инструкции CSS , инструкциями адресованными непосредственно к Internet Explorer?

Для этой цели можно использовать оператор условия if встроенный непосредственно в тело HTML документа. Строго говоря встраивать условие лучше в «голове» документа , до тега body, внутри тега head.
Рассмотрим простой пример. Допустим у Вас существует файл с CSS общего пользования названный style.css Кроме того Вы написали css-стили адресованные непосредственно в адрес браузера Internet Explorer 6, тогда шапка Вашей html- страницы может выглядеть следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<!-- подключаем стили для всех браузеров -->
<link rel="stylesheet" type="text/css" href="http://weblomaster.ru/css/Main.css">
<!-- подключаем стили персонально для IE -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="http://weblomaster.ru/css/IE.css" />
<![endif]-->
</head>
<body>

Как Вы можете видеть, условие заключено в комментарий  <!–[if ]> и заканчивается закрывающим тегом <![endif]–>
Конструкция <!–[if IE]>сообщает документу условия работы со всеми браузерами Microsoft Internet Explorer (за исключением 10 версии и выше). Если Вы, наоборот хотите исключить MSIE , добавьте в условие восклицательный знак и дополнительные скобки комментарии, вот так:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="http://weblomaster.ru/css/MainNoIE.css">
<!--<![endif]-->

Пример того как это должно работать можно посмотреть на тестовой странице.

А теперь давайте вернёмся к конкретной версии браузера IE. Ранее мы упомянули некогда самый популярный у пользователей браузер Internet Explorer 6. Чтобы указать файл CSS стилей явно для шестой версии достаточно подставить в выражение рассмотренное выше цифру 6 через пробел:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="http://weblomaster.ru/css/IE-6.css" />
<![endif]-->

Тоже самое верно для 5 версии браузера, для 7, 8 и 9-ой просто ставим соответствующую цифру.

Ещё один прием – это указания диапазона версий. Например, версий IE ниже чем 9-ая или выше чем 6-ая. В таком случае используется сокращения lt (less than) и gt (great than) подставляемые в выражение следующим образом:

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="http://weblomaster.ru/css/IE-less-than-9.css" />
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="http://weblomaster.ru/css/IE-great-than-6.css" />
<![endif]-->

Опубликовано 01.06.2015 в 23:41 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: CSS, HTML · Теги: , , , , , , , , , ,