Селектор IE8 css

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

IE6:

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

IE7:

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

Кто-нибудь знает, как настроить таргетинг на IE8?

Ответы

Ответ 1

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

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

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

И для того, чтобы построить другой ответ, вы можете сделать это, чтобы назначить стили variou для 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/

Ответ 2

Обновление

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

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

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

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

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

Пример:

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

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

Ответ 3

Посмотрите на них:

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

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

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

Ответ 4

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

<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 {color: inherit;} .ie7 div.foo {цвет: # ff8000; }

Ответ 5

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

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

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

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

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

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

Итак, Red = только для IE8.

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

Ответ 6

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

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

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

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

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

CSS..

#IE8Body #nav li ul {}

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

Ответ 7

Основываясь на отличном ответе 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, а также на сложные комбинации.

Ответ 8

В мире 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 { .... }

или хуже!

Ответ 9

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

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

Ответ 10

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

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, например:

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

Сноска

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

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

Ответ 11

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

#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 selector, то они также исправят, что когда-либо было связано с тем, что вы нацелились на IE8.

Ответ 12

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

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

Ответ 13

\ 9 не работает с шрифтом-семейством, вместо этого вам нужно использовать "\ 0/! important" как упомянутый выше Крис, например:

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

Ответ 14

В 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/