「画像の使用を(略)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 のバグ?