web-dev-qa-db-ja.com

n番目のchild（）CSS要素をサポートするようにInternet Explorer 8を作成する方法は？

テーブルの行にゼブラストライプ効果を与えたい。他のすべてのブラウザでは、CSS nth子要素を使用して実行できます。しかし、私はそれをしたいIE 8も。 SOどうすればできますか？

cssinternet-explorer-8compatibilitycss-selectorsie8-compatibility-mode
24
surajR

IEのcss3セレクターをサポートする http://selectivizr.com/ JSを使用できます。

26
sandeep

ポリフィルの場合： Selectivizr で十分です。

ポリフィルなし：IE8は最初の子をサポートするため、これをだましてiE8のn番目の子をサポートできます。

/*li:nth-child(2)*/
li:first-child + li {}/*Works for IE8*/

IE8では複雑なセレクター、つまりnth-child（2n + 1）またはnth-child（odd）をエミュレートすることはできませんが。

58
Samar Panda

Selectivizrの代替として、小さなjQueryを使用できます。

$('.your-list li:nth-child(3n+1)').addClass('nth-child-3np1');

次に、CSSに2番目のセレクターを追加します。

:nth-child(3n+1)
{
    clear: both;
}

.nth-child-3np1
{
    clear: both;
}
36
Jonathan

「first-child」セレクターと「+」セレクターは両方ともIE7で使用でき、「+」は加算的です。

したがって、「+」セレクターを連続して追加することにより、「nth-child」をシミュレートできます。

tr:nth-child(4)

になる：

tr:first-child + tr + tr + tr

すべての兄弟要素が同じである場合、次のように「*」ワイルドカードで十分です。

tr:first-child + * + * + *

多数の行を指定すると、CSSファイルのサイズが小さくなります。

セレクターの間にスペースは必要ないことに注意してください。そのため、1行目、3行目、5行目を選択するために、セレクターを省略することでファイルサイズをさらに小さくすることができます。

tr:first-child,tr:first-child+*+*,tr:first-child+*+*+*+*

もちろん、非常に大きなテーブルには対応したくないでしょう！

*をフィラーとして使用する場合は、:first-child要素と最後の要素に明示的なタグ名が与えられていることを確認してください。DOMのすべての要素に対してルールがテストされ、これらの要素特定のブラウザがルールを最初に適用する場合、すべてのシーケンスでいくつかの要素をステップオーバーして最終的に各要素のルールに失敗した後に失敗するのではなく、最後に失敗します。正当な理由もなくブラウザを動作させないでください！

1
Patanjali