IE7 の隣接セレクタで気が付いたこと

「画像の使用を(略)CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ (E + F) がまったく適用されていないのに気がつき...

IE7画像の使用を(略)CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ (E + F) がまったく適用されていないのに気がつきました。

IE7 は隣接セレクタに対応してるはずなのでおかしいな、なんか自分の書き方がおかしいのかな?なんて思って、手元にある CSS をいじったりしてみたのですがまったく効果なし。何でだろうと思って HTML 文書の方を見て、何気なくソース内のコメントを削除してみたら......

普通に適用されてる...... orz

該当する HTML ソースは下記の通り。

<div id="navigation">
<h2>Contents</h2>
...中略...
</div><!-- end#navigation -->
<div class="section">
 <h2>この文書について</h2>
...続く

それに対して例えば下記のようなスタイルを宣言していますが......

div#navigation + div.section {
     margin: 1em 1.5em 3em 1.5em;
     padding: 1em;
     border: 1px solid #ccc;
     }

スタイルは適用されず。そこで 2つの div 要素の間のコメントを削除してみます。

<div id="navigation">
<h2>Contents</h2>
...中略...
</div>
<div class="section">
 <h2>この文書について</h2>
...続く

そしたら適用されたよ。

コメントあり (公式 HTML そのまま) だと↓

IE7 隣接セレクタ検証 コメントあり

コメント削除後だと↓

IE7 隣接セレクタ検証 コメントあり

どうやら、隣接セレクタの判断時に、コメントをカウントしてしまっているようで...... これって IE7 のバグ?

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか?