Подтвердить что ты не робот

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

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

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

margin:100px\9;

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

Ответ 1

Из HTML5 Boilerplate и первоначально из Paul Irish:

Измените тэг <html> :

<!--[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 = "" на вашем языке. Спасибо, без ведома.

Ответ 2

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

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

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

Ответ 3

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

: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 */

Ответ 4

Существует три способа сделать это,

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, которые могут быть прочитаны только Explorer. Например, добавьте звездочку (*), прежде чем свойство 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

Третий вариант, который был основан Paul Irish, заключается в добавлении класса 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]-->