it-swarm.com.de

Wie zielt man auf IE7 und IE8 mit gültigem CSS?

Ich möchte IE7 und IE8 mit W3C-konformem CSS ansprechen. Manchmal ist das Korrigieren von CSS für eine Version nicht für die andere Version geeignet. Wie kann ich das erreichen?

65
Wasim Shaikh

Explizit IE Versionen ohne Hacks mit HTML und CSS

Verwenden Sie diesen Ansatz, wenn Sie keine Hacks in Ihrem CSS möchten. Fügen Sie dem Element <html> Eine browserspezifische Klasse hinzu, damit Sie sie später basierend auf dem Browser auswählen können.

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 können Sie in Ihrem CSS sehr genau auf Ihren Zielbrowser zugreifen.

Beispiel

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

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

Target IE Versionen mit CSS "Hacks"

Mehr zu Ihrem Punkt, hier sind die Hacks, mit denen Sie IE Versionen ausrichten können.

Verwenden Sie "\ 9", um auf IE8 und darunter abzuzielen.
Verwenden Sie "*", um auf IE7 und niedriger abzuzielen.
Verwenden Sie "_", um auf IE6 abzuzielen.

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: Ziel IE10

IE10 erkennt die bedingten Anweisungen nicht, daher können Sie hiermit eine "ie10" -Klasse auf das Element <html> Anwenden

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

Ich würde empfehlen, bedingte Kommentare zu lesen und ein separates Blatt für die IEs zu erstellen, mit denen Sie Probleme haben.

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

Die Antwort auf Ihre Frage

Eine vollständig gültige Methode zum Auswählen aller Browser außer IE8 und darunter ist die Verwendung der Pseudoklasse :not(). Da IE Versionen 8 und niedriger :not() nicht unterstützen, werden Selektoren, die es enthalten, ignoriert. Dies bedeutet, dass Sie Folgendes tun können:

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

Dies ist immer noch vollständig gültiges CSS, aber es führt dazu, dass IE8 und niedriger unterschiedliche Stile rendern (und auch Opera <9.5 und Safari <3.2).

Andere Tricks

Hier ist eine Liste aller vollständig gültigen CSS-Browser-spezifischen Selektoren, die ich finden konnte , außer für einige, die ziemlich redundant zu sein scheinen, wie diejenigen, die nur für 1 auswählen Art des alten Browsers ( 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 */

Credits & Quellen:

9
Joeytje50

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

Nur IE 8-Standardmodus

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

IE 8,9 und 10

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

Nur IE 9

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

Nur IE 10

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

IE 10 und höher

_:-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 wird beim Laden der Seite schnell ausgeführt, um Funktionen zu erkennen. Anschließend wird ein JavaScript-Objekt mit den Ergebnissen erstellt und dem HTML-Element Klassen hinzugefügt

Benutzeragentenauswahl

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

Fügt dem html -Element (z. B.) Folgendes hinzu:

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'

Ermöglichen sehr zielgerichteter CSS-Selektoren, z.

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

Fußnote

Vermeiden Sie nach Möglichkeit das Browser-Targeting. Identifizieren und beheben Sie alle von Ihnen identifizierten Probleme. Unterstützen Sie progressive Verbesserung und graziösen Abbau . Unter diesem Gesichtspunkt ist dies ein Szenario der „idealen Welt“, das in einer Produktionsumgebung nicht immer verfügbar ist, da dies dazu beitragen sollte, einige gute Optionen bereitzustellen.


Attribution/Essential Reading

7
SW4

Nun, Sie müssen sich nicht wirklich Sorgen machen, dass IE7-Code in IE8 nicht funktioniert, da IE8 über einen Kompatibilitätsmodus verfügt (es kann Seiten wie in IE7 rendern). Wenn Sie jedoch nach wie vor unterschiedliche Versionen des Internet Explorers als Ziel festlegen möchten, verwenden Sie seit einiger Zeit entweder bedingte Kommentare oder beginnen Sie Ihre CSS-Regel mit einem *, um IE7 und als Ziel festzulegen unten . Sie können auch auf den Benutzeragenten auf den Servern achten und basierend auf diesen Informationen eine andere CSS-Datei erstellen.

4
Bjorn Tipling

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

IE8 ist fast normenkonform, daher sollten Sie keine Hacks dafür benötigen, vielleicht nur ein paar Verbesserungen. Das Problem ist, wenn Sie einige Hacks für IE6 und IE7 verwenden. Sie müssen sicherstellen, dass sie nur für diese Versionen gelten und nicht für IE8.

Ich habe die Website unseres Unternehmens vor einiger Zeit mit IE8 kompatibel gemacht. Das einzige, was ich tatsächlich geändert habe, war das Hinzufügen des Meta-Tags, das IE dass die Seiten IE8-kompatibel sind ...

4
Guffa

Ich habe es mit Javascript gemacht. Ich füge dem HTML-Element drei CSS-Klassen hinzu:

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

Also für IE7 fügt es 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 benutzen Sie das .ie<version> CSS-Klasse in Ihrem Stylesheet, wie von Potench beschrieben.

(Benutzte Marios Erkennungsfunktion in Überprüfe, ob der Benutzer IE mit jQuery verwendet)

Der Vorteil von lte-ie8 und lt-ie8 usw. ist, dass Sie alle Browser ansprechen können, die kleiner oder gleich IE9 sind, dh IE7 - IE9.

1
Tahir Hassan