So verwenden Sie :nth-child in Internet Explorer 8: Eine Problemumgehung

IE8 :nth-child und :before: A Fix

Internet Explorer 8 ist berüchtigt für seine Inkonsistenzen mit modernen Webstandards. Ein häufiges Problem, mit dem Entwickler konfrontiert sind, ist die mangelnde Unterstützung für den CSS-Selektor für das n-te Kind.

Das Problem

Bedenken Sie den folgenden CSS-Code:

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

Während dieser Code in den meisten modernen Browsern einwandfrei funktioniert, schlägt er im Internet Explorer 8 auf mysteriöse Weise fehl.

Die Lösung

Trotz der Herausforderungen, die IE8 mit sich bringt ist eine Problemumgehung zur Simulation der :nth-child-Funktionalität. Durch die Nutzung des benachbarten Geschwisterkombinators ( ) können Sie auf bestimmte Elemente in einer Sequenz abzielen:

#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}

Mit diesem Ansatz können Sie grundlegende Variationen von :nth-child emulieren. Komplexere Variationen wie :nth-child(odd) oder :nth-child(4n 3) können jedoch mit dieser Methode nicht repliziert werden.

Hinweis: Diese Problemumgehung behebt zwar das Problem von Durch das Anwenden von Stilen auf bestimmte Elemente in einer Sequenz wird das Verhalten von :nth-child möglicherweise nicht vollständig reproduziert und kann in komplexeren Szenarien zu unbeabsichtigten Konsequenzen führen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie :nth-child in Internet Explorer 8: Eine Problemumgehung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!