web-dev-qa-db-ja.com

IE8：nth-​​childおよび：before

これが私のCSSです：

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

Internet Explorer 8を除くすべての場所で動作します（私のWebサイトで this を使用）。

IE8でnth-childを使用する方法はありますか？これはこのブラウザの最悪のバージョンです...期待どおりに機能しません。修正する方法が見つかりません。

@edit：達成したいものの簡略版： http://jsfiddle.net/LvvNL/ 。そのほんの始まりです。 CSSはより複雑になるので、このリンクのすべてを狙う必要があります。すべてのリンクにクラスを追加することが唯一の方法ではないことを願っています

@編集2：私はちょうどそれに気づいた

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

IE8で実際に動作しています！でも、これ：

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

動かない。それで何が起こっているのでしょうか？

cssinternet-explorer-8css-selectors
65
smogg

隣接する兄弟コンビネータ（_+_） を（ab）使用して、IE7/8で動作するCSSでこれを実現できます。

参照：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;
}​
_

このメソッドでは、:nth-child()や:nth-child(odd)など、:nth-child(4n+3)のより複雑なバリエーションをエミュレートすることはできません。

254
thirtydot

IE9.js は、この問題およびその他の関連問題を解決します！

:nth-child(odd)と:nth-child(even)はこれで動作します。

使用法：

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

Selectivizr と NMWatcher を組み合わせてみてください。これは、すべてのブラウザーで優れた疑似セレクターサポートを取得するために、すべてのサイトで行っていることです。 FWIWあなたが多くのHTML5要素を使用している場合、1.2.4ではなくNMWatcherのv 1.2.3を使用する価値があるかもしれませんが、私は今日サイトでselectivizrの問題を抱えていました1.2.3になり、正常に機能しました。

6
JonMack

IE8（およびそれ以下） サポートしない:nth-child()、ただしdoesは:afterをサポートします。ただし、セレクタで:afterの前に:nth-child()を使用しているため、IE8はそれを実行しません。

JavaScriptソリューションを使用するには、その行にクラスを追加するか、これらのセレクターのサポートを追加するライブラリを使用します。

5
Bojangles

：nth-​​child（1）の代わりに：first-childを使用できます。これにより、IE7 +でより適切にサポートされます。

http://quirksmode.org/css/firstchild.html も参照してください

2
c4urself

ie9.jsは最適なソリューションのように聞こえますが、セルにクラスを追加することもできます。たとえば、

<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