Alexgks Feb 13 2012 at 19:06

Еще один способ использования условных комментариев

2 min

1.8K

Здравствуйте хабровчане, хотел поделиться еще одним вариантом валидного хака для Internet Explorer'а.
Так как выносить стили для 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. Данный способ не является особенным или уникальным, но в некоторых случаях может быть полезен.

Tags:

Hubs: