Я хочу настроить IE7 и IE8 на W3C-совместимый CSS. Иногда исправление CSS для одной версии не исправляется для другого. Как я могу достичь этого?
Как настроить IE7 и IE8 на допустимый CSS?
Ответ 1
Явно задавать версии IE без хаков с использованием HTML и CSS
Используйте этот подход, если вам не нужны хаки в CSS. Добавьте уникальный для браузера класс в элемент <html>, чтобы впоследствии можно было выбрать на основе браузера.
Пример
<!doctype html>
<!--[if IE]><![endif]-->
<!--[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]-->
<head></head>
<body></body>
</html>
Затем в вашем CSS вы можете очень строго обращаться к своему целевому браузеру.
Пример
.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}
Для получения дополнительной информации просмотрите http://html5boilerplate.com/
Целевые версии IE с CSS "Hacks"
Более того, вот хаки, которые позволяют вам настраивать версии IE.
Используйте "\ 9" для настройки IE8 и ниже.
Используйте "*" для ориентации на IE7 и ниже.
Используйте "_" для настройки IE6.
Пример:
body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}
Обновление: целевой IE10
IE10 не распознает условные операторы, поэтому вы можете использовать это для применения класса "ie10" к элементу <html>
<!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@[email protected]*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
<head></head>
<body></body>
</html>
Ответ 2
Я бы рекомендовал посмотреть условные комментарии и сделать отдельный лист для IE, с которыми вы столкнулись.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
Ответ 3
Ответ на ваш вопрос
Полностью допустимый способ выбора всех браузеров, но IE8 и ниже использует псевдокласс класса :not(). Поскольку версии IE 8 и ниже не поддерживают :not(), селектора, содержащие его, игнорируются. Это означает, что вы можете сделать что-то вроде этого:
p {color:red;}
p:not([ie8min]) {color:blue;}
Это все еще полностью допустимый CSS, но это заставляет IE8 и ниже отображать разные стили (а также Opera < 9.5 и Safari < 3.2).
Другие трюки
Вот список всех полностью корректных селекторов, специфичных для браузера CSS, которые я мог найти, за исключением некоторых, которые кажутся довольно избыточными, например, те, которые выбирают только один тип древнего браузера (1, 2):
/****** First the hacks that target certain specific browsers ******/
* html p {color:red;} /* IE 6- */
*+html p {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
} /* Chrome, Safari 3+ */
p, body:-moz-any-link {color:red;} /* Firefox 1+ */
:-webkit-any(html) p {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p {color:red;} /* Firefox 4+ */
/****** And then the hacks that target all but certain browsers ******/
html> body p {color:green;} /* not: IE<7 */
head~body p {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p {color:green;} /* not: IE<8 */
body:first-of-type p {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */
Кредиты и источники:
Ответ 4
Для более полного списка по состоянию на 2015 год:
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;
}
Сноска
Если возможно, избегайте таргетинга на браузер. Определите и исправьте любые проблемы, которые вы идентифицируете. Поддержка прогрессивное улучшение и грациозная деградация. Имея это в виду, это сценарий "идеального мира", который не всегда доступен в производственной среде, как таковой, - это должно помочь обеспечить некоторые хорошие варианты.
Атрибуция/существенное чтение
Ответ 5
Ну, вам действительно не нужно беспокоиться о том, что IE7-код не работает в IE8, потому что IE8 имеет режим совместимости (он может отображать страницы так же, как IE7). Но если вы все еще хотите настроить таргетинг на различные версии IE, то теперь можно использовать условные комментарии или начните свое правило css с * на целевой IE7 и ниже. Или вы можете обратить внимание на пользовательский агент на серверах и выложить другой файл CSS на основе этой информации.
Ответ 6
Реальная проблема - не IE8, а хаки, которые вы используете для более ранних версий IE.
IE8 довольно близок к стандартам, поэтому вам не нужны никакие хаки для него, возможно, только некоторые настройки. Проблема в том, что вы используете некоторые хаки для IE6 и IE7; вам нужно будет убедиться, что они применяются только к этим версиям, а не к IE8.
Я сделал веб-сайт нашей компании совместимым с IE8 некоторое время назад. Единственное, что я фактически изменил, это добавить метатег, который сообщает IE, что страницы совместимы с IE8...
Ответ 7
Я сделал это с помощью Javascript. Я добавляю три класса CSS в элемент html:
ie<version>
lte-ie<version>
lt-ie<version + 1>
Итак, для IE7 он добавляет ie7, lte-ie7..., lt-ie8...
Вот код javascript:
(function () {
function getIEVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
var trident = ua.indexOf('Trident/');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
} else if (trident > 0) {
// IE 11 (or newer) => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
} else {
return NaN;
}
};
var ieVersion = getIEVersion();
if (!isNaN(ieVersion)) { // if it is IE
var minVersion = 6;
var maxVersion = 13; // adjust this appropriately
if (ieVersion >= minVersion && ieVersion <= maxVersion) {
var htmlElem = document.getElementsByTagName('html').item(0);
var addHtmlClass = function (className) { // define function to add class to 'html' element
htmlElem.className += ' ' + className;
};
addHtmlClass('ie' + ieVersion); // add current version
addHtmlClass('lte-ie' + ieVersion);
if (ieVersion < maxVersion) {
for (var i = ieVersion + 1; i <= maxVersion; ++i) {
addHtmlClass('lte-ie' + i);
addHtmlClass('lt-ie' + i);
}
}
}
}
})();
Впоследствии вы используете класс .ie<version> css в своей таблице стилей, как описано potench.
(Используется функция Mario detectIE в Проверить, использует ли пользователь IE с jQuery)
Преимущество использования lte-ie8 и lt-ie8 и т.д. заключается в том, что вы можете настроить таргетинг на весь браузер, который меньше или равен IE9, то есть IE7 - IE9.