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