Здравствуйте хабровчане, хотел поделиться еще одним вариантом валидного хака для Internet Explorer'а.
Так как выносить стили для IE отдельный файл не всегда удобно, особенно в некоторых проектах, когда стили для определенной страниц хочется видеть в одном файле.
Хочу описать два варианта решения данной проблемы:
Мы добавляем для body класс с именем браузера определенной версии, условные комментарии помогают избавиться от проблемы с неверным распознанием User Agent'а
В таком случае если необходимо изменить стиль блока только для IE
в CSS указывам:
Но данный способ подходит не во всех случаях, например, когда у пользователя отключен JavaScript.
Такой вариант предусматривает создание обертки внутри body или вокруг самого элементу с определенным классом, которую будет видеть только IE:
Либо можно обойтись без общего класса для IE 7 и IE 8
и в CSS, классы указать через запятую:
Пример использования
P.S. Данный способ не является особенным или уникальным, но в некоторых случаях может быть полезен.
Так как выносить стили для IE отдельный файл не всегда удобно, особенно в некоторых проектах, когда стили для определенной страниц хочется видеть в одном файле.
Хочу описать два варианта решения данной проблемы:
1. Вариант с использованием JavaScript:
Мы добавляем для body класс с именем браузера определенной версии, условные комментарии помогают избавиться от проблемы с неверным распознанием User Agent'а
<!--[if IE 7]> <script type="text/javascript"> document.body.className='ie7'; </script> <![endif]--> <!--[if IE 8]> <script type="text/javascript"> document.body.className='ie8'; </script> <![endif]-->
В таком случае если необходимо изменить стиль блока только для IE
<body> <div class="example"> <p>съешь ещё этих мягких <strong>французских</strong> булок, да выпей чаю</p> </div> </body>
в CSS указывам:
.example p{ color: green; } .ie8 .example p{/*Только для IE 8*/ color: yellow; margin-top: 8px; } .ie7 .example p{/*Только для IE 7*/ color: red; margin-top: 5px; } .ie7 .example p strong, .ie8 .example p strong{/*Для IE 7 и IE8*/ color: #000; }
Но данный способ подходит не во всех случаях, например, когда у пользователя отключен JavaScript.
2. Вариант без JavaScript и без вынесения стилей для IE в отдельный файл:
Такой вариант предусматривает создание обертки внутри body или вокруг самого элементу с определенным классом, которую будет видеть только IE:
<body> <!--[if IE 7]> <div class="ie7"> <![endif]--> <!--[if IE 8]> <div class="ie8"> <![endif]--> <!--[if lt IE 9]> <div class="lte9"> <![endif]--> <div class="example"> <p>съешь ещё этих мягких <strong>французских</strong> булок, да выпей чаю</p> </div> <!--[if lt IE 9]> </div> </div> <![endif]--> </body>
Либо можно обойтись без общего класса для IE 7 и IE 8
<body> <!--[if IE 7]> <div class="ie7"> <![endif]--> <!--[if IE 8]> <div class="ie8"> <![endif]--> <div class="example"> <p>съешь ещё этих мягких <strong>французских</strong> булок, да выпей чаю</p> </div> <!--[if lt IE 9]> </div> <![endif]--> </body>
и в CSS, классы указать через запятую:
.example p{ color: green; } .ie8 .example p{/*Только для ИЕ 8*/ color: yellow; margin-top: 8px; } .ie7 .example p{/*Только для ИЕ 7*/ color: red; margin-top: 5px; } .ie7 .example p strong, .ie8 .example p strong{ color: #000; }
Пример использования
P.S. Данный способ не является особенным или уникальным, но в некоторых случаях может быть полезен.
