IE8 CSS селектор - PullRequest
Новая
       68

IE8 CSS селектор

45 голосов
/ 19 марта 2009

Для таргетинга элементов только в браузерах IE я буду использовать

IE6: 

* html #nav li ul {
    left: -39px !important;
    border: 1px solid red;
}

IE7: 

*+html #nav li ul  {
    left: -39px! important;
}

Кто-нибудь знает, как нацелиться на IE8?

Ответы [ 14 ]

84 голосов
/ 23 сентября 2010

Я не собираюсь вступать в дискуссию о том, следует ли использовать этот метод, но это позволит вам установить определенные атрибуты CSS только для IE8-9 (примечание: это не селектор, поэтому немного отличается чем то, что вы спросили):

Используйте '\ 0 /' после каждого объявления CSS, поэтому: 

#nav li ul  {
  left: -39px\0/ !important;
}

И для построения другого ответа вы можете сделать это, чтобы назначить различные стили для IE6, IE7 и IE8: 

#nav li ul  {
   *left: -7px    !important; /* IE 7 (IE6 also uses this, so put it first) */
   _left: -6px    !important; /* IE 6 */
    left: -8px\0/ !important; /* IE 8-9 */
}

Источник: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/

75 голосов
/ 19 марта 2009

2013 обновление: IE10 + больше не поддерживает условные комментарии.

Оригинальный ответ:

Некоторые люди, кажется, смущены, потому что это не отвечает на букву вопроса, только дух - поэтому для пояснения:

Нет такой вещи как селектор браузера. Есть хаки, которые используют ошибки и / или глюки в CSS-парсерах определенных браузеров, но полагаясь на них, вы настраиваете себя на неудачу. Существует стандартный, общепринятый способ справиться с этим:

Используйте условные комментарии только для IE.

Пример: 

<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->

Все внутри этих двух <!--> будет игнорироваться всеми браузерами, отличными от IE, в качестве комментария, и версии IE, которые меньше IE8, пропустят его. Только IE8 и выше будет обрабатывать его. 2013 обновление: IE10 + также будет игнорировать его как комментарий.

26 голосов
/ 30 апреля 2009

Взгляните на это: 

/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }

/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }

(Источник: CSS-хак Дэвида Блума для режима стандартов IE8 )

14 голосов
/ 25 октября 2011

вы можете использовать как это. это лучше чем 

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  /><![endif]-->
-------------------------------------------------------------

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
  <!--[if IE 7 ]> <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]> <body class="ie8"> <![endif]-->
  <!--[if !IE]>--> <body> <!--<![endif]-->

div.foo {цвет: наследовать;} .ie7 div.foo {color: # ff8000; }

11 голосов
/ 01 мая 2012

Опираясь на превосходный ответ image72, вы могли бы использовать расширенные селекторы CSS, например: 

<!--[if lt IE 7]><body class="IE IE7down IE8down IE9down IE10down"><![endif]-->
<!--[if IE 7]><body class="IE IE7 IE7down IE8down IE9down IE10down IE7up"><![endif]-->
<!--[if IE 8]><body class="IE IE8 IE8down IE9down IE10down IE7up IE8up"><![endif]-->
<!--[if IE 9]><body class="IE IE9 IE9down IE10down IE7up IE8up IE9up"><![endif]-->
<!--[if gte IE 10]><body class="IE IE10 IE10down IE7up IE8up IE9up IE10up"><![endif]-->
<!--[if !IE]>--><body class="notIE"><!--<![endif]-->

так что в вашем css вы можете сделать это: 

.notIE   .foo { color: blue;   } /* Target all browsers except IE */
.IE9up   .foo { color: green;  } /* Taget IE equal or greater than 9 */
.IE8     .foo { color: orange; } /* Taget IE 8 only */
.IE7down .foo { color: red;    } /* Target IE equal or less than 7 */

.IE8 .foo, .IE9 .foo {
    font-size: 1.2em;            /* Target IE8 & IE9 only */
}

.bar { background-color: gray; } /* Applies to all browsers, as usual */

/* Maybe show a message only to IE users? */
.notIE #betterBrowser { display: none;  } /* Any browser except IE */
.IE    #betterBrowser { display: block; } /* All versions of IE */

Это здорово, потому что:

  • Это полностью соответствует стандартам (без уродливых / опасных хаков CSS)
  • Нет необходимости иметь отдельные таблицы стилей
  • Вы можете легко настроить таргетинг на любую версию IE, а также на сложные комбинации
11 голосов
/ 08 апреля 2010

Этот вопрос древний, но ..

Сразу после открывающего тега тела .. 

<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->

Прямо перед закрывающим тегом тела. 

<!--[if gte IE 8]>
</div>
<![endif]-->

CSS .. 

#IE8Body #nav li ul {}

Вы можете сделать это для всех браузеров IE, используя условные операторы, ИЛИ нацелиться на ВСЕ браузеры, инкапсулируя весь контент в div с именем браузера + версия на стороне сервера

11 голосов
/ 26 октября 2009

Стиль CSS только для IE8: 

.divLogRight{color:Blue; color:Red\9; *color:Blue;}

Только IE8 будет красным.

Первый синий: для всех браузеров.

Красный: только IE6,7,8

Второй синий: только IE6,7

Итак, красный = только для IE8.

Чтобы получить полную информацию о взломах браузеров (включая Internet Explorer (IE), Safari, Chrome, iPhone и Opera), перейдите по этой ссылке: http://paulirish.com/2009/browser-specific-css-hacks/

4 голосов
/ 05 декабря 2014

В свете развивающейся темы, см. Ниже для более полного ответа:

IE 6 

* html .ie6 {property:value;}

или 

.ie6 { _property:value;}

IE 7 

*+html .ie7 {property:value;}

или 

*:first-child+html .ie7 {property:value;}

IE 6 и 7 

@media screen\9 {
    .ie67 {property:value;}
}

или 

.ie67 { *property:value;}

или 

.ie67 { #property:value;}

IE 6, 7 и 8 

@media \0screen\,screen\9 {
    .ie678 {property:value;}
}

IE 8 

html>/**/body .ie8 {property:value;}

или 

@media \0screen {
    .ie8 {property:value;}
}

Только в стандартном режиме IE 8 

.ie8 { property /*\**/: value\9 }

IE 8,9 и 10 

@media screen\0 {
    .ie8910 {property:value;}
}

только IE 9 

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 и выше 

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 и 10 

@media screen and (min-width:0) {
    .ie910{property:value;}
}

IE 10 только 

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 и выше 

_:-ms-lang(x), .ie10up { property:value; }

или 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (и выше ..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript альтернативы

Modernizr

Modernizr быстро запускается при загрузке страницы для обнаружения функций; тогда создает объект JavaScript с результатами и добавляет классы к HTML-элемент

Выбор агента пользователя

Javascript: 

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Добавляет (например, ниже) к элементу html: 

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Разрешить очень целевые CSS-селекторы, например ::1010* 

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Сноска

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

Атрибуция / Основное чтение

4 голосов
/ 23 сентября 2010

У меня есть решение, которое я использую только тогда, когда мне нужно, после того, как я соберу свой html & css, действующий и работающий в большинстве браузеров, я иногда получаю хак с этим удивительным фрагментом JavaScript от Рафаэля Лимы. http://rafael.adm.br/css_browser_selector/

Он сохраняет мой CSS & HTML корректным и чистым, я знаю, что это не идеальное решение, использующее javascript для исправления хаков, но пока ваш код изначально максимально близок (глупый IE иногда просто что-то ломает), тогда что-то перемещается несколько пикселей с JavaScript не так важны, как думают некоторые. Плюс по причинам времени / стоимости это быстрое и простое решение.

4 голосов
/ 27 апреля 2009

В мире ASP.NET я, как правило, использовал встроенную функцию BrowserCaps для записи набора классов в тег body, который позволяет вам ориентироваться на любую комбинацию браузера и платформы.

Итак, перед предварительным рендерингом я бы запустил что-то вроде этого кода (при условии, что вы дадите свой тег идентификатору и сделаете его запущенным на сервере): 

HtmlGenericControl _body = (HtmlGenericControl)this.FindControl("pageBody");
_body.Attributes.Add("class", Request.Browser.Platform + " " + Request.Browser.Browser + Request.Browser.MajorVersion);

Этот код позволяет вам настроить таргетинг на конкретный браузер в вашем CSS следующим образом: 

.IE8 #nav ul li { .... }
.IE7 #nav ul li { .... }
.MacPPC.Firefox #nav ul li { .... }

Мы создаем подкласс System.Web.UI.MasterPage и следим за тем, чтобы все наши мастер-страницы наследовали от нашего специализированного MasterPage, чтобы на каждой странице эти классы добавлялись бесплатно.

Если вы не находитесь в среде ASP.NET, вы можете использовать jQuery, в котором есть плагин для браузера, который динамически добавляет похожие имена классов при загрузке страницы.

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

.IE8 #container { .... }

Вместо 

* html #container { .... }

или хуже!

Страница:
...