カテゴリー:バグ関連

表示タイプ
リスト表示へ
ボックス表示中

IE7で隣接セレクタに落とし穴? IE7で隣接セレクタを使う際の注意点

2008年2月 8日 13:37

WWW WATCHさんのところで興味深い記事を見つけたので備忘録的に書いてみた。

タイトル通りだけど、どうやらIE7の隣接セレクタにはバグがあり、HTML文書でコメントアウトしている要素も"隣接"と認識してしまうもの、という感じ。

▼サンプルを書いてみた
IE7で隣接セレクタを使う際の注意点サンプル

▼IE7で見た隣接セレクタバグのサンプル画像
IE7で隣接セレクタを使う際の注意点サンプル画像

IE7で見てもらうとわかるけど、確かにコメントがあるだけで隣接セレクタが効いていない。
(サンプルの上がコメントあり、下がコメントをつけただけでHTML、CSS共にまったく同じ)

まだIE6が全盛だけど、そろそろIE7へ自動更新が始まるから、そうなったら隣接セレクタにお世話になりそう。そのときにこういった類のバグは覚えておくとあとあと楽かも。

▼CSSソース
  1. .testbox + .testbox02 {
  2. color: #f00;
  3. font-weight: bold;
  4. }
▼HTMLソース
  1. <div id="test01">
  2. <div class="testbox">
  3. <p>テスト用BOX</p>
  4. </div>
  5. <div class="testbox02">
  6. <p>隣接セレクタ用BOX</p>
  7. </div>
  8. </div>
  1. <div id="test02">
  2. <div class="testbox">
  3. <p>テスト用BOX</p>
  4. </div>
  5. <!-- comment out -->
  6. <div class="testbox02">
  7. <p>隣接セレクタ用BOX</p>
  8. </div>
  9. </div>

IEで、背景を指定すると余白が消える

2007年6月 5日 14:40

今作成している案件で、どういうわけか理由のわからない現象が発生したので備忘録的メモ。
問題の原因などがあったら追記しようと思います。

とりあえず現象が起きているサンプルを見てもらったほうがわかりやすいかと思います。

▼サンプルはこちら
IEで、背景を指定すると余白が消えるサンプル1
IEで、背景を指定すると余白が消えるサンプル2

さて、サンプル1が思惑通りにタブメニューになっているもの、サンプル2が下のborderが消えてしまっているものです。(サンプルが適当ですいません(;´д`))

ちなみに、サンプル1と2の違いは、borderを表示するためのdiv要素に、背景を指定しているか、いないか、の違いだけです。
IE7、6では、なぜか背景を指定すると、padding-bottomの設定を無視して高さが失われます。
(背景を指定しないと正常にpadding-bottomが適用されます)
Firefox2.0では特にこういった現象はありませんでした。

とりあえず、背景を指定したい場合は、さらにその外側にdiv要素を配置して、そこに背景を指定するしかなさそうです。

ちなみに、IE5.5ではどうしてもborderが出てきませんでした・・。

peek-a-booバグ

2006年9月25日 10:02

いないいないばぁバグ、と言われるものだそうです。
WinIEで発生するバグで、ボーダーや背景がスクロールしたときに消えるバグだとか。
再読み込みすると出て来たりするのでいないいないばぁと呼ばれてるんでしょう。
解決策は、問題の出る要素に対して「heigh:1%」を指定するだけ。
WinIEの場合、高さを指定しても内容によって勝手に高さが変わるので問題ありません。
(他のモダンブラウザでは、高さ指定するとそれに固定されるため、WinIEのみに適用させるようハックを使う必要があります)

とある案件でこれが出て、また1からCSS見直さないといけないのかなーと凹んでたので
簡単に解決してよかったです。(本当に)
とりあえず備忘録的に書いてみました。
初耳だったので他の人の参考にもなればな、とも思い。
とりあえず久々の更新ですがこれだけです(´・ω・`)