it-swarm.com.ru

IE8 CSS селектор

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

IE6:

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

IE7:

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

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

45
Chris

Я не собираюсь вступать в дискуссию о том, следует ли использовать этот метод, но это позволит вам устанавливать конкретные атрибуты 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/

84
Nick

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

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

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

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

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

Пример:

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

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

75
Rex M

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

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

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

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

26
Gumbo

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

<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 {цвет: # ff8000; }

14
image72

Основываясь на превосходном ответе 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
MrFusion

Стиль 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- хаки/

11
SirMoreno

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

Сразу после открытия тега тела ..

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

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

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

CSS ..

#IE8Body #nav li ul {}

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

11
anon

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

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 быстро запускает загрузку страницы для обнаружения функций; это потом создает объект 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-селекторы, например:

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

Сноска

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


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

4
SW4

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

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

4
Ammi J Embry

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

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

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 { .... }

или хуже!

4
jonsidnell

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

#nav li ul:not(.stupidIE) { color:red }

Так что технически это противоположно тому, что хотел OP, но это просто означает, что вы должны сначала применить правило, которое вы хотите для IE8, а затем применить это для всего остального. Конечно, вы можете поместить что-либо в (), если это действительный CSS, который ничего не выбирает. IE8 душит эту строку и не применяет ее, но предыдущие IE (хорошо, я только проверил IE7, я перестал заботиться о IE6), просто проигнорируйте: not () и примените объявления. И, конечно, любой другой браузер (я тестировал Safari 5, Opera 10.5, Firefox 3.6) применяет этот CSS, как и следовало ожидать.

Так что это решение, я думаю, как и любое другое чисто CSS-решение, предполагает, что если разработчики IE добавят поддержку селектора: not, то они также исправят все несоответствия, которые заставляли вас ориентироваться на IE8.

3
Moss

Итак, это не взлом css, но из-за разочарования из-за невозможности найти способы нацеливания на ie8 из css, и из-за политики отсутствия определенных файлов CSS, я должен был выполнить следующее, что я предполагаю, что кто-то другой может оказаться полезным:

if (jQuery.browser.version==8.0) {
   $(results).css({
         'left':'23px',
         'top':'-253px'
      });
}
2
Zeljko Dakic

\ 9 не работает с font-family , вместо этого вам нужно использовать «\ 0 /! Важный», как Крис упоминал выше, например:

p { font-family: Arial \0/ !important; }
1
Ricardo Zea

Для IE8 нет селекторных хаков. Лучший ресурс для этой проблемы - http://browserhacks.com/#ie

Если вы хотите нацелиться на конкретный IE8, вы должны сделать комментарий в HTML

<!--[if IE 8]> Internet Explorer 8 <![endif]-->

или вы можете использовать атрибуты хаков, как:

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Для получения дополнительной информации об этой проверке: http://www.paulirish.com/2009/browser-specific-css-hacks/

0
fernandopasik