Как я могу иметь специальный CSS для IE? - PullRequest
6 голосов
/ 18 мая 2011

Я хотел бы использовать несколько различных CSS для ie8, но оставить только один файл CSS.Может кто-нибудь сказать мне, что лучше "взломать" для этого?Да, я знаю, что хаки не очень хороши, но я бы хотел сохранить хотя бы один CSS-файл.

Например, в браузерах, отличных от IE8, я бы хотел, чтобы браузер видел это:

div.content_header_heading { 
    background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 35%, #eeeeee 65%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(35%,#eeeeee), color-stop(65%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 35%,#eeeeee 65%,#cccccc 100%); /* IE10+ */
}

Но если браузер IE8, я бы хотел, чтобы браузер видел это:*

div.content_header_heading { 
}

Ответы [ 4 ]

19 голосов
/ 18 мая 2011

Пол Ирландский имеет хорошее решение этой проблемы. Он включает использование условных комментариев для размещения классов в теге <html>:

<!--[if lt IE 7 ]> <b><html class="ie6"> </b><![endif]-->
<!--[if IE 7 ]>    <b><html class="ie7"> </b><![endif]-->
<!--[if IE 8 ]>    <b><html class="ie8"> </b><![endif]-->
<!--[if IE 9 ]>    <b><html class="ie9"> </b><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

Затем вы можете настроить таргетинг версий IE с помощью правил CSS:

<b>.ie8</b> div.content_header_heading { 
}

См. http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/.

1 голос
/ 18 мая 2011

Простейшие CSS-хаки для разных версий в IE:

.color {color: #777;} /* for all browsers */
* html .color {color: #C39;} /* for IE6 */
*+html .color {color: #66F;} /* for IE7 (you can also use the long expresion " *:first-child+html ") */
.color {color: #0FC\0/;} /* for IE8, going last */

все вышеперечисленное является хаком, но по крайней мере они используют VALID CSS, кроме хака для IE8, где я рекомендую использовать условный комментарий.

1 голос
/ 18 мая 2011

Лучший способ убедиться, что каждый HTML-элемент интерпретируется (вообще) браузером, - это использовать http://www.modernizr.com/

Если вы хотите использовать заголовок, нижний колонтитул или другие новые элементы html5, то Modernizr создаст их так, чтобы старые браузеры понимали эти элементы.

1 голос
/ 18 мая 2011

Лучший способ, с которым я столкнулся, - это использовать другой файл CSS для Internet Explorer.

Затем в своем HTML вы можете исключить или включить их, используя типичные блоки условного кода, которые вы найдете в Интернете.

<!--[if IE 6]>
  CSS HERE
<![endif]-->

Вставляйте только те строки CSS, которые должны отличаться в этой версии IE.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...