Wie kann man IE7 und IE8 mit gültigen CSS Ziel?

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

Frage

Ich will IE7 und IE8 mit W3C-konformen CSS Ziel. Manchmal CSS Festsetzung für eine Version behebt nicht für den anderen. Wie kann ich erreichen das?

War es hilfreich?

Lösung

Explizit Ziel IE-Versionen ohne Hacks mit HTML und CSS

Mit diesem Ansatz verwenden, wenn Sie nicht Hacks wollen in Ihrem CSS. Fügen Sie einen Browser-einzigartige Klasse zum <html> Elemente, so dass Sie auswählen können, basierend auf Browser später.

Beispiel 

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

Dann in Ihrem CSS können Sie sehr streng Ihr Ziel-Browser zugreifen.

Beispiel 

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

Weitere Informationen finden Sie auf http://html5boilerplate.com/

Ziel IE-Versionen mit CSS "Hacks"

Mehr zu Ihrem Punkt, hier sind die Hacks, die Sie zielen IE-Versionen lassen.

Mit "\ 9" IE8 zum Ziel und unten.
Verwenden Sie „*“ Ziel IE7 und unten.
Verwenden Sie "_" auf IE6 Ziel.

Beispiel: 

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 */
}

Update: Target IE10

IE10 nicht die bedingten Anweisungen erkennen, so dass Sie diese verwenden, um eine „IE10“ Klasse zum <html> Elemente anwenden 

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

Andere Tipps

würde ich auf der Suche in bedingte Kommentare empfehlen und ein separates Blatt für die IEs, dass Sie Probleme mit haben. 

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

Die Antwort auf Ihre Frage

Eine völlig gültige Weise alle Browser zu wählen, aber IE8 und unterhalb der :not() Pseudo-Klasse verwendet. Da IE-Versionen 8 und unten nicht :not() unterstützen, es Selektoren enthalten, wird ignoriert. Dies bedeutet, dass Sie etwas tun könnten: 

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

Dies ist nach wie vor in vollem Umfang gültig CSS, aber es verursacht IE8 und niedriger verschiedene Stile zu machen (und auch Opera <9.5 und Safari <3.2).

Andere Tricks

Hier ist eine Liste aller vollständig gültigen CSS browserspezifischen Selektoren ich finden konnte, außer für einige, die ziemlich überflüssig erscheinen, wie diejenigen, die für nur 1 Art von altem Browser wählen ( 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 */

Impressum & Quellen:

Für eine vollständigere Liste ab 2015:

IE 6 

* html .ie6 {property:value;}

oder 

.ie6 { _property:value;}

IE 7 

*+html .ie7 {property:value;}

oder 

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

IE 6 und 7 

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

oder 

.ie67 { *property:value;}

oder 

.ie67 { #property:value;}

IE 6, 7 und 8 

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

IE 8 

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

oder 

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

IE 8-Standards-Modus Nur 

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

IE 8,9 und 10 

@media screen\0 {
    .ie8910 {property:value;}
}

IE 9 nur 

@media screen and (min-width:0) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 und höher 

@media screen and (min-width:0) and (min-resolution: +72dpi) {
  // IE9+ CSS
  .ie9up{property:value;}
}

IE 9 und 10 

@media screen and (min-width:0) {
    .ie910{property:value;}
}

IE 10 nur 

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 und über 

_:-ms-lang(x), .ie10up { property:value; }

oder 

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .ie10up{property:value;}
}

IE 11 (und höher ..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Javascript Alternativen

Modernizr

  

Modernizr schnell läuft auf Seite Last zu erfassen Funktionen; Es dann   erstellt ein JavaScript-Objekt mit den Ergebnissen, und fügt Klassen der   html-Element

User-Agent-Auswahl

Die 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':'');

Adds (z) die unten an dem html Element: 

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'

Zulassen sehr targetted CSS-Selektoren, z. 

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

Fußnote

Wenn möglich, vermeiden Browser-Targeting. Identifizieren und beheben eine Frage (n) zu identifizieren. Unterstützung Progressive Enhancement und graceful Degradation . In diesem Sinne ist dies eine ‚heile Welt‘ -Szenario nicht immer erhältlich in einer Produktionsumgebung, wie such- sollte die oben helfen, einige gute Möglichkeiten zu bieten.

Attribution / wesentliches Lesen

Nun, Sie müssen nicht wirklich Sorgen über IE7 Code nicht in IE8 zu arbeiten, weil IE8 Kompatibilitätsmodus hat (es können Seiten die gleiche wie IE7 machen). Aber wenn Sie noch verschiedene Versionen von IE ausrichten möchten, eine Art, die für eine Weile jetzt getan worden ist, ist entweder mit bedingte Kommentare oder Ihre CSS-Regel beginnen mit a * IE7 und unterhalb Ziel. Oder Sie die Aufmerksamkeit auf User-Agenten auf den Servern bezahlen konnten und auftischen eine andere CSS-Datei auf der Grundlage dieser Informationen.

Das eigentliche Problem ist nicht IE8, aber die Hacks, die Sie für frühere Versionen von IE verwenden.

IE8 ist ziemlich nahe Standards kompatibel sein, so dass Sie keine Hacks für sie überhaupt benötigen, vielleicht nur einige Optimierungen. Das Problem ist, wenn Sie einige Hacks für IE6 und IE7 verwenden; Sie müssen sicherstellen, dass sie nur auf diese Versionen und nicht IE8 gelten.

Ich habe die Website unseres Unternehmens kompatibel mit IE8 vor einer Weile. Das einzige, was ich tatsächlich geändert wurde Hinzufügen der Meta-Tag, der IE sagt, dass die Seiten sind IE8 konform ...

Ich habe es mit Javascript. Ich füge drei CSS-Klassen in das HTML-Elemente: 

ie<version>
lte-ie<version>
lt-ie<version + 1>

Also für IE7, fügt ie7, lte-ie7 ..., lt-ie8 ...

Hier ist der Javascript-Code: 

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

Danach Sie die .ie<version> CSS-Klasse in Ihrem Stylesheet verwenden, wie durch potench beschrieben.

(Marios detectIE Funktion in Überprüfen Sie, ob Benutzer IE mit jQuery ist mit )

Der Vorteil lte-IE8 und lt-ie8 usw. zu haben, ist, dass es Sie alle Browser weniger ausrichten können als oder gleich IE9, das heißt IE7 -. IE9

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top