Использование условных комментариев IE внутри таблицы стилей

Я знаю, что вы можете использовать условный комментарий IE внутри HTML:

<!--[if IE]>
  <link href="ieOnlyStylesheet.css" />
<![endif]-->

Но что, если я хочу нацелить только IE на таблицу стилей, настраивая правило CSS для определенного элемента внутри html. Например, вы можете использовать этот Chrome/Safari hack внутри файла css в качестве кода css...

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
}

Но используя IE hack внутри таблицы стилей CSS, как это:

 <!--[if IE]>
      .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
 <![endif]-->

не работает. Что я могу использовать внутри таблицы стилей только для IE?

Ответы

Ответ 1

Условные комментарии не работают в таблицах стилей. Вместо этого вы можете использовать условные комментарии в своем HTML для применения различных классов или идентификаторов CSS к элементам, которые затем можно настроить с помощью CSS.

Например:

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->

Кроме того, существуют такие инструменты, как Modernizr, которые выполняют функцию обнаружения очень похожим образом (путем добавления классов к элементу <html>). Вы можете использовать его для постепенного улучшения дизайна /script для новых браузеров при одновременном использовании старых браузеров.

Ответ 2

Это может быть проще, чем сказал Дерек Хунцикер:

Просто включите этот код, как есть:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>

Тогда вы можете легко настроить таргетинг, например, если вы хотите настроить таргетинг на IE 8 и ниже, вы пишете:

.lt-ie9 body{css rule here;}

и все готово!

Приветствия

Ответ 3

Вы не можете использовать условные комментарии IE, но можете использовать хаки. Эта страница CSS-хаков объясняет, что IE-хаки вы можете использовать (и многое другое).

Ответ 4

IE stylesheet hacks

.Class {
   color:  green;     /* standard */
   color:  green\9;   /* IE 8 and below */
   *color: green;     /* IE 7 and below */
   color:  green !ie; /* IE 7 and below */
   _color: green;     /* IE 6 */
}

Ответ 5

У вас нет, просто используйте условные комментарии IE для загрузки определенной таблицы стилей IE:

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

Есть хаки CSS, но обратите внимание, что для взлома требуется использование ошибки синтаксического анализа (какого-то типа) для таргетинга определенного правила CSS в браузер. Они вряд ли будут исправлены в последующих исправлениях для конкретного воплощения браузера, но они будут исправлены в более поздних версиях (поэтому IE 9 и 10 не подвержены влиянию CSS-хаков, нацеленных на IE 6 или IE 5 для Mac...).

Ответ 6

Что вы хотите сделать, так это стилизовать все в своей таблице стилей, как обычно для любого другого браузера. ПОСЛЕ того, как вы импортируете обычную таблицу стилей на свою страницу, вы затем импортируете таблицу стилей, специфичную для IE, с помощью обычного условного оператора <!--[if IE]>.

После этого метода импортируются стили для всех браузеров, а затем используются ваши стили, специфичные для IE, для переопределения тех, которые несовместимы, не отображаются правильно или их нужно настроить для использования в IE.