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

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

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

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

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

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

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

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

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

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

  1. <div id="navigation">
  2. <h2>Contents</h2>
  3. ...中略...
  4. </div>
  5. <div class="section">
  6. <h2>この文書について</h2>
  7. ...続く

そしたら適用されたよ。

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

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

コメント削除後だと↓

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

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

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