Ie8で通常の指定と疑似クラス指定を並べると効かない?:メモ

未解決であり、原因も判明していませんので状況メモです。

テーマはIE8(エミュレーター)でのクラス指定方法による想定外の事態。

メジャーな話だったり、別要因によるミスであればごめんなさい（汗

前提

以下が前提です。

• IE8(VirtualBoxとIE11開発者ツール)で確認
• jQueryでli要素にクラスを設定
• 通常の「*:nth-child(n)」に並べて、class又はidを指定

具体例としては以下のような形です。

li:nth-child(1), li#item1{ color:red; }

<ul>
<!-- 下記のidはjQueryで付与 -->
 <li class="item" id="item1"></li>
 <li class="item" id="item2"></li>
 <li class="item" id="item3"></li>
</ul>

IE8以下ではnth-child疑似クラスなどが使えませんので、代替手段としてIE8以下のみにjQueryでidを付けた形です。

疑似クラスと並べると効かない

上記前提のように、疑似クラスとidを並べてしていするとcssが効かなくなりました。
組み合わせを試した範囲では、以下の疑似クラスと並べると問題が発生しました。

• :last-child(n)
• :nth-child(n)
• :nth-last-child(n)
• :nth-of-type(n)

挙動をみると似たような情報がありました。が、一度見て間違ってタブを閉じてしまい、履歴から探すもそのページがみつからず..（汗

うろ覚えの内容としては、「IE9.jsがあると特定の疑似クラスが無効化される」とかだったと思います。

ただ今回は特にそういうものは読み込んでいなかったため、この原因ではなさそうではありますが。

対応策

仕方が無いので、IE8用の記述を分けて書きました。

結び

全く同じ設定を2カ所に書かねばならないとは…。無念です。
原因が分かれば対応策も見えてくる可能性もあり、後でもう少し探ってみようと思いますが、IE8対応はメインでは無いため浅い調査になりそうです。

VirtualBox

VirtualBoxのIe8の開発者ツールで、jQueryによってidを付与した箇所をみるとidが追加されていないことがありました。

が、いずれもcssは効いています。

つまり、IE8の開発者ツール内では見えずともidなりclassなりはちゃんと付与されていて、cssは効くということになります。

このせいでjQueryの指定方法自体から見直しましたため、状況に気づくだけでも余計に時間を使いました…。
ブラウザのキャッシュの問題が濃厚なのですが、そもそもjQueryを取除いていないままで確認しているのに、idが付いたり消えたりしましたので可能性は低そうです。