Как один целевой IE7 и IE8 с допустимым CSS?

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

 <!--[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

другой трюки

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

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

• http://css-tricks.com/snippets/css/browser-specific-hacks/
• https://en.wikipedia.org/wiki/CSS_hack
• http://www.webdevout.net/css-hacks
• MDN::first-child; :root; :first-of-type; :not(); :any(); * ~ *

для более полного списка по состоянию на 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 {
    .ie67 {property:value;}
}

или

.ie67 { *property:value;}

или

.ie67 { #property:value;}

IE 6, 7 и 8

@media screen\,screen {
    .ie678 {property:value;}
}

IE 8

html>/**/body .ie8 {property:value;}

или

@media screen {
    .ie8 {property:value;}
}

режим стандартов IE 8 только

.ie8 { property /*\**/: value }

IE 8,9 и 10

@media screen {
    .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; }

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;
}

---

сноска

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

---

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

• Кит Кларк
• Павел Ирландский
• Web Devout
• Ключ

Ну вам действительно не нужно беспокоиться о том, что код 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 ...

вот код:

(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.

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

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