Как можно ориентироваться на IE7 и IE8 с действующим CSS? - PullRequest
65 голосов
/ 02 мая 2009

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

Ответы [ 7 ]

164 голосов
/ 03 декабря 2010

Явно целевые версии 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 (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>
21 голосов
/ 02 мая 2009

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

 <!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css" />
 <![endif]-->
9 голосов
/ 08 января 2014

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

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

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

Это все еще полностью действующий CSS, но он заставляет IE8 и ниже отображать разные стили (а также Opera <9.5 и Safari <3.2). </p>

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

Вот список всех полностью допустимых селекторов 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 */

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

7 голосов
/ 06 января 2015

Для более полного списка по состоянию на 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-селекторы, например ::1010*

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

Сноска

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


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

4 голосов
/ 02 мая 2009

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

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

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

4 голосов
/ 02 мая 2009

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

1 голос
/ 02 апреля 2014

Я сделал это с помощью 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.

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

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

...