Blog

※ブログ移転しました。 → hamashun.me

複数のclassをセレクタに指定した際のIEのバグ

追記あり

複数のclassをセレクタに指定する方法でぴんどめさんからコメント頂いた件ですが、その後ぴんどめさんからサンプルファイルを送って頂けて、どうやら判明しました!
ぴんどめさん、わざわざありがとうございました!

HTML

<div class="sample code test">~</div>

CSS

div.hoge.test {
 color: red;
}

こんなソースがあった時に、本来ならば文字色は変わらないはずです。 現にFirefoxやOperaではそのように表示されます。
しかし、なんとびっくりIE様は文字色を赤にしてしまうのです! なんてこった!

どうやらIE様は、複数のclassを使うセレクタは、最後の一つのclassしか見ていないようです。 ドジッ娘属性にも程がある。

なお、この現象はIE5.0 IE5.5 IE6(全てスタンドアローン版)で確認されました。
IE7とSleipnir2.5.10では確認されませんでした。
プニルって、IE7のエンジンなのかな・・・・・・。 公式をざっと見ても分らなかったので、その辺今度調べたいです。

「プニルって、IE7のエンジンなのかな・・・・・・」何を言ってるのだ、この人は

はてブでツッコミいただいたので追記。
Trident (レイアウトエンジン) - Wikipedia
ここで言うところのTrident IVなのかTrident Vなのか、っていう意味でした。
あれ? それとは違う意味のツッコミなのかな。 ちょっとこれだけだと分からないです。 すみません。
とりあえず追記ここまで。

さらに追記。
子セレクタとかmax-widthとか解釈するようなので、Trident Vみたい。 ちょっと調べれば分かる事でしたね。

何にせよ、現段階では、他の手段でセレクタを指定した方が良さそうですね。

おまけ

と言う事は、IE様とそれ以外のブラウザの振り分けに使えない事もないのかな。 激しく分りづらいですけどw
あ、あともちろん、その際は文書に沿ったclassで。

TracBack

Reference Entry:  複数のclassをセレクタに指定した際のIEのバグ:

kappadow.jp » Internet Explorer と CSS 【解決?編】
前回のエントリ、Internet Explorer と CSSで書いたネタですが、とりあえず解決?したかもしれないのでエントリ(笑)結論としては、IE6が...
TracBack Time:  2007年05月30日 16:17

2 Comment

どーも。こちらでははじめますて。

Sleipnirとかは今入っているIEのエンジンを使ってるだけなので、IE7をインストールしていればIE7と同じ描画になりますよ。

Name:Yozik | 2007年05月26日 16:40

はじめましてw


>IE7をインストールしていればIE7と同じ描画になりますよ。
オフッ。 そういう事でしたか。
あざす!

Name:Shun | 2007年05月26日 17:54

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive