wake-up-neo.com

IE8: n-te Kind und: vorher

Hier ist mein CSS:

#nav-primary ul li:nth-child(1) a:after { }

Funktioniert jetzt überall (verwendet dies auf meiner Website) außer Internet Explorer 8 ...

Gibt es möglicherweise eine Möglichkeit, nth-child in IE8 zu verwenden? Dies ist die schlechteste Version dieses Browsers.

@edit: Vereinfachte Version dessen, was ich erreichen möchte: http://jsfiddle.net/LvvNL/ . Es ist nur ein Anfang. CSS wird komplizierter sein, daher muss ich in der Lage sein, jeden dieser Links auszurichten. Ich hoffe, das Hinzufügen von Klassen zu jedem Link ist nicht der einzige Weg

@ edit2: Das ist mir gerade aufgefallen 

#nav-primary ul li:nth-child(1) a {
    border-top: 5px solid #144201;
}

IST eigentlich in IE8! Aber dieses:

#nav-primary ul li:nth-child(1) a:after {
    content: "Text";
    display: block;
    font-weight: normal;
    padding-top: 5px;
    font-size: 12px;
    color: #666;
}

funktioniert nicht. Also, was ist los?

65
smogg

Sie können (ab) den benachbarten Geschwisterkombinator (+) verwenden, um dies mit CSS zu erreichen, das in IE7/8 funktioniert.

See:http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}​

Sie können mit dieser Methode keine komplexeren Variationen von :nth-child() wie :nth-child(odd) oder :nth-child(4n+3) emulieren.

254
thirtydot

IE9.js löst dieses und andere verwandte Probleme!

:nth-child(odd) und :nth-child(even) arbeiten damit.

Verwendungszweck:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
28
Niko

Versuchen Sie, Selectivizr mit NMWatcher zu koppeln. Das ist es, was ich auf allen meinen Websites tue, um eine gute Pseudo-Selector-Unterstützung für alle Browser zu erhalten. FWIW Wenn Sie viele HTML5-Elemente verwenden, lohnt es sich möglicherweise, die Version 1.2.3 von NMWatcher anstelle von 1.2.4 zu verwenden. Ich hatte ein selectivizr-Problem mit einer Site, die ich anscheinend nicht reparieren konnte, und zog dann um bis 1.2.3 und es hat gut funktioniert.

6
JonMack

IE8 (und darunter) unterstützt:nth-child() nicht, aber unterstützt:after. Da Sie jedoch :nth-child() vor :after in Ihrem Selector verwenden, wird IE8 dies nicht ausführen.

Sie können eine JavaScript-Lösung verwenden, indem Sie dieser Zeile eine Klasse hinzufügen oder eine Bibliothek, die diese Selektoren unterstützt.

5
Bojangles

Sie können Folgendes verwenden: first-child anstelle von: nth-child (1) Dies wird in IE7 + besser unterstützt

Siehe auch http://quirksmode.org/css/firstchild.html

2
c4urself

ie9.js klingt nach der besten Lösung, aber Sie können den Zellen auch einfach eine Klasse hinzufügen, z

<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>
<tr>
    <td class='first-cell'>stuff</td><td class='second-cell>stuff</td>
</tr>

.first-cell {
    font-weight: bold;
}
.second-cell {
    font-weight: normal;
}
0
omarjebari