WWW WATCH

「画像の使用を（略）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 のバグ？