Чтобы ориентировать элементы только в браузерах IE, я буду использовать
IE6:
* html #nav li ul {
left: -39px !important;
border: 1px solid red;
}
IE7:
*+html #nav li ul {
left: -39px! important;
}
Кто-нибудь знает, как настроить таргетинг на IE8?
Я не собираюсь обсуждать, следует ли использовать этот метод, но это позволит вам устанавливать определенные атрибуты 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/
2013: IE10 + больше не поддерживает условные комментарии.
Оригинальный ответ:
Некоторые люди, похоже, смущены, потому что это не отвечает на букву вопроса, только дух - поэтому для разъяснения:
Нет такой вещи, как селектор браузера. Существуют хаки, которые используют ошибки и/или сбои в синтаксических анализаторах браузеров браузеров, но полагаясь на них, вы настраиваете себя на неудачу. Существует стандартный, приемлемый способ справиться с этим:
Используйте условные комментарии только для IE.
Пример:
<!--[if gte IE 8]>
<style>
(your style here)
</style>
<![endif]-->
Все внутри двух <!--> будет игнорироваться всеми браузерами, отличными от IE, в качестве комментариев, а версии IE, которые меньше IE8, пропустят его. Только IE8 и выше будут обрабатывать его. Обновление 2013 года: IE10 + также игнорирует его как комментарий.
Посмотрите на них:
/* IE8 Standards-Mode Only */
.test { color /*\**/: blue\9 }
/* All IE versions, including IE8 Standards Mode */
.test { color: blue\9 }
(Источник: Дэвид Блумс CSS-хак для режима стандартов IE8)
вы можете использовать это. это лучше, чем
<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; }
Стиль 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/
Этот вопрос древний, но..
Сразу после открытия тега тела.
<!--[if gte IE 8]>
<div id="IE8Body">
<![endif]-->
Перед тегом закрывающего тела.
<!--[if gte IE 8]>
</div>
<![endif]-->
CSS..
#IE8Body #nav li ul {}
Вы можете сделать это для всех браузеров IE, используя условные операторы ИЛИ ИЛИ ВСЕ ВСЕ браузеры, инкапсулируя весь контент в div с именем браузера + серверной версией
Основываясь на отличном ответе 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 */
Это здорово, потому что:
В мире 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 { .... }
или хуже!
У меня есть решение, которое я использую только тогда, когда мне нужно, после того, как я построил свой html и css, действующий и работающий в большинстве браузеров, я делаю случайный взлом с этой удивительной частью javascript от Rafael Lima. http://rafael.adm.br/css_browser_selector/
Он сохраняет мои CSS и HTML действительными и чистыми, я знаю, что это не идеальное решение, используя javascript для исправления хаков, но до тех пор, пока ваш код изначально как можно ближе (глупый IE просто ломает вещи иногда), а затем перемещая что-то несколько пикселей с javascript - это не такая большая сделка, как думают некоторые люди. Плюс по причинам времени/стоимости - это быстрое и легкое исправление.
В свете развивающейся нити, см. ниже для более полного ответа:
* html .ie6 {property:value;}
или
.ie6 { _property:value;}
*+html .ie7 {property:value;}
или
*:first-child+html .ie7 {property:value;}
@media screen\9 {
.ie67 {property:value;}
}
или
.ie67 { *property:value;}
или
.ie67 { #property:value;}
@media \0screen\,screen\9 {
.ie678 {property:value;}
}
html>/**/body .ie8 {property:value;}
или
@media \0screen {
.ie8 {property:value;}
}
.ie8 { property /*\**/: value\9 }
@media screen\0 {
.ie8910 {property:value;}
}
@media screen and (min-width:0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
@media screen and (min-width:0) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}
}
@media screen and (min-width:0) {
.ie910{property:value;}
}
_:-ms-lang(x), .ie10 { property:value\9; }
_:-ms-lang(x), .ie10up { property:value; }
или
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}
}
_:-ms-fullscreen, :root .ie11up { property:value; }
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;
}
Если возможно, избегайте таргетинга на браузер. Определите и исправьте любые проблемы, которые вы идентифицируете. Поддержка прогрессивное улучшение и грациозная деградация. Имея это в виду, это сценарий "идеального мира", который не всегда доступен в производственной среде, как таковой, - это должно помочь обеспечить некоторые хорошие варианты.
Я понимаю, что это старый вопрос, но это был первый результат в 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.
ОК, так что это не css-взломать, но из-за разочарования в том, что вы не можете найти способы нацелиться на ie8 из css и из-за политики отсутствия определенных файлов css мне нужно было сделать следующее, которое я предположим, что кто-то может найти полезное:
if (jQuery.browser.version==8.0) {
$(results).css({
'left':'23px',
'top':'-253px'
});
}
\ 9 не работает с шрифтом-семейством, вместо этого вам нужно использовать "\ 0/! important" как упомянутый выше Крис, например:
p { font-family: Arial \0/ !important; }
В 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/