Internet Explorer 8 で :nth-child を使用する方法: 回避策

IE8 :nth-child および :before: 修正

Internet Explorer 8 は、最新の Web 標準と矛盾していることで有名です。開発者が直面する一般的な問題は、CSS の n 番目の子セレクターがサポートされていないことです。

問題

次の CSS コードを考えてみましょう:

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

このコードはほとんどの最新ブラウザでは問題なく機能しますが、Internet Explorer では不思議なことに失敗します。 8.

解決策

IE8 によってもたらされる課題にもかかわらず、:nth-child 機能をシミュレートする回避策があります。隣接兄弟コンビネータ ( ) を活用することで、シーケンス内の特定の要素をターゲットにすることができます。

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

このアプローチを使用すると、:nth-child の基本的なバリエーションをエミュレートできます。ただし、:nth-child(odd) や :nth-child(4n 3) などのより複雑なバリエーションは、この方法では複製できません。

注: この回避策では、シーケンス内の特定の要素にスタイルを適用すると、:nth-child の動作が完全に複製されない可能性があり、より複雑なシナリオで意図しない結果が生じる可能性があります。

以上がInternet Explorer 8 で :nth-child を使用する方法: 回避策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。