Как настроить таргетинг на IE7 и IE8 с помощью допустимого CSS?

StackOverflow https://stackoverflow.com/questions/814219

Вопрос

Я хочу настроить таргетинг на IE7 и IE8 с помощью W3C-совместимого CSS.Иногда исправление CSS для одной версии не приводит к исправлению для другой.Как я могу этого добиться?

Это было полезно?

Решение

Явно ориентируйтесь на версии 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-"Хаков"

Более того, вот хаки, которые позволяют вам ориентироваться на версии 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 (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

Другие советы

Я бы порекомендовал изучить условные комментарии и составить отдельный лист для тех IE, с которыми у вас возникли проблемы. 

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

Ответ на ваш вопрос

Полностью верный способ выбрать все браузеры, кроме IE8 и ниже, - это использовать :not() псевдокласс.Поскольку IE версий 8 и ниже не поддерживает :not(), селекторы, содержащие его, игнорируются.Это означает, что вы могли бы сделать что-то вроде этого:

p {color:red;}
p:not([ie8min]) {color:blue;}

Это по-прежнему полностью допустимый CSS, но это приводит к тому, что IE8 и ниже отображают разные стили (а также Opera<9.5 и Safari<3.2).

Другие хитрости

Вот список всех полностью допустимых селекторов CSS для конкретного браузера, которые я смог найти, за исключением для некоторых, которые кажутся довольно избыточными, например, для тех, которые выбирают только для 1 типа древнего браузера (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 */

Кредиты и источники:

Для получения более полного списка по состоянию на 2015 год:

IE 6

* html .ie6 {property:value;}

или

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

или

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

Т. е. 6 и 7

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

или

.ie67 { *property:value;}

или

.ie67 { #property:value;}

Т.е. 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 }

Т. е. 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;}
}

Т. е. 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;
}

Сноска

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

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

Ну, вам не нужно беспокоиться о том, что код IE7 не работает в IE8, потому что IE8 имеет режим совместимости (он может отображать страницы так же, как IE7). Но если вы все еще хотите ориентироваться на разные версии IE, способ, который уже давно используется, заключается в использовании условные комментарии или начинайте свое правило css с от * до IE7 и ниже . Или вы можете обратить внимание на пользовательский агент на серверах и создать другой CSS-файл на основе этой информации.

Фактическая проблема не в IE8, а в хакерских атаках, которые вы используете для более ранних версий IE.

IE8 довольно близок к тому, чтобы быть совместимым со стандартами, поэтому вам вообще не нужны никакие хаки, возможно, только некоторые настройки. Проблема в том, что вы используете некоторые хаки для IE6 и IE7; вам нужно убедиться, что они применимы только к этим версиям, а не к IE8.

Некоторое время назад я сделал веб-сайт нашей компании совместимым с IE8. Единственное, что я на самом деле изменил, - это добавление метатега, который сообщает IE, что страницы соответствуют IE8 ...

Я сделал это, используя 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 в своей таблице стилей, как это описано вotench.

(Использовал функцию детектирования Mario в Проверьте, использует ли пользователь IE с jQuery )

Преимущество использования lte-ie8, lt-ie8 и т. д. состоит в том, что вы можете настроить таргетинг на все браузеры, меньшие или равные IE9, то есть IE7 - IE9.

Не связан с StackOverflow
scroll top