internet-explorer скачать - Как настроить IE7 и IE8 на допустимый CSS?




windows 10 (7)

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

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


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

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

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

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

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


Явно целевые версии 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>

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

Полностью допустимый способ выбора всех браузеров, но IE8 и ниже использует псевдокласс class :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 */

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


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

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

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


Это сложнее, чем некоторые другие решения, но может предложить большую гибкость в сценариях:

1) Сделайте определение класса, чтобы изолировать (инкапсулировать) стиль, который вы хотите применить / удалить выборочно. Он может быть пустым (и для этого случая, вероятно, должно быть):

.myColor {}

2) используйте этот код на основе http://jsfiddle.net/kdp5V/167/ из этого ответа gilly3 :

function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Пример использования: http://jsfiddle.net/qvkwhtow/

Предостережения:

  • Не подвергается экстенсивному тестированию.
  • Не может включать важные или другие директивы в новое значение. Любые такие существующие директивы будут потеряны в результате этой манипуляции.
  • Только изменения впервые обнаружили появление стиляSelector. Не добавляет и не удаляет целые стили, но это может быть сделано с чем-то более сложным.
  • Любые недопустимые / непригодные значения будут игнорироваться или вызывать ошибку.
  • В Chrome (по крайней мере) нелокальные (как в межсайтовых) правила CSS не отображаются через объект document.styleSheets, поэтому это не будет работать на них. Нужно добавить локальные переопределения и манипулировать ими, имея в виду «первое обнаруженное» поведение этого кода.
  • document.styleSheets не особенно дружелюбен к манипуляциям в целом, не ожидайте, что это будет работать для агрессивного использования.

Изолировать стиль таким образом - это то, что такое CSS, даже если манипулировать им нет. Манипулирование CSS-правилами НЕ является тем, чем является jQuery, jQuery управляет элементами DOM и использует селектор CSS для этого.





css internet-explorer internet-explorer-8 web-standards