Целевой IE9 или IE8, но не оба с использованием CSS - PullRequest
Новая
       19

Целевой IE9 или IE8, но не оба с использованием CSS

10 голосов
/ 02 мая 2011

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

Как я могу настроить таргетинг IE8 в одиночку, используя CSS, потому что я пытался добавить \9, например: 

margin:100px\9;

Однако, это также влияет на IE9, и я не хочу этого, потому чтоIE9 весь сайт выглядит нормально.

Ответы [ 4 ]

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

Из HTML5 Boilerplate и первоначально из Пол Ирландский :

Измените тег на этот: 

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

Затем IE8 добавит класс .ie8 в тег html. То же самое для всех других версий IE. Затем вы можете сделать: 

.ie8 {
    margin:100px;
}

Редактировать: Удален класс no-js , и, пожалуйста, обновите атрибут lang = "" для вашего языка. Спасибо, отсутствие век.

9 голосов
/ 08 декабря 2011

Это должно работать только в IE9 (и, возможно, также в более новых версиях): 

:root #element-id {
  margin: 400px\9;
}

Это потому, что :root псевдокласс не реализован в версиях, предшествующих IE9 (см. http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx).

3 голосов
/ 04 февраля 2013

Вы можете использовать корневую функцию

:root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

взломать только на IE 

#element {
color:orange;
}
#element {
*color: white;    /* IE6 + 7, doesn't work in IE8/9 as IE7 */
}
#element {
_color: red;     /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8 + 9 + IE10pp4  */
}
:root #element { color:pink \0/IE9; }  /* IE9 + IE10pp4 */
1 голос
/ 25 июля 2014

Есть три способа сделать это,

Условные комментарии IE

Условный комментарий IE, вероятно, наиболее часто используется для исправления ошибок IE для определенных версий (IE6, IE7, IE8). Ниже приведен пример кода для различных версий Internet Explorer: 

    <!--[if IE 8]> = IE8
    <!--[if lt IE 8]> = IE7 or below
    <!--[if gte IE 8]> = greater than or equal to IE8

<!--[if IE 8]>
<style type="text/css">
    /* css for IE 8 */
</style>
<![endif]-->

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

Правила CSS, специфичные для Explorer (взломы IE CSS)

Еще один вариант - объявить правила CSS, которые могут быть прочитаны только Проводником. Например, добавьте звездочку (*), прежде чем свойство CSS будет нацелено на IE7, или добавьте подчеркивание, прежде чем свойство нацелится на IE6. Однако этот метод не рекомендуется, так как они не являются допустимым синтаксисом CSS. 

IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
IE7 or below: add an asterisk (*) before the CSS property.
IE6: add an underscore (_) before the property.

.box {

    background: gray; /* standard */

    background: pink\9; /* IE 8 and below */

    *background: green; /* IE 7 and below */

    _background: blue; /* IE 6 */

}

Условный класс HTML

Третий вариант, который был основан Полом Айришем, - это добавить класс CSS с версией IE в тег HTML с помощью условных комментариев IE. По сути, он проверяет, является ли он IE, а затем добавляет класс в тег html. Поэтому для определения конкретной версии IE просто используйте класс IE в качестве родительского селектора (например, .ie6 .box). Это умный способ, который не вызывает ошибок валидации. 

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