IE7の隣接セレクタのバグ #CSS珍百景
CSS珍百景 Calendar 2014 10日目の記事です。
IE7は、隣接セレクタ E + F を使用した時、 E と F の間にコメントアウトが存在すると、コメントアウトを1つの要素と認識して、 E + F が機能しない。
再現
以下の様なHTMLがあった時に、隣接セレクタを使用して、 .c にアクセスする。
A
B
C
CSSは以下のようにする。
/*css*/
.a + .b + .c {
color: blue;
}
.a + .b + * + .c {
color: red;
}
この時、普通に考えれば、 .c の文字色は青色になる。
Chromeでは以下のように表示される。
しかし、IE7では .c の文字色が赤色になる。
＿人人人人人人人人人＿
＞ なんてこったい ＜
￣Y^Y^Y^Y^Y^Y^Y^Y￣
回避方法
この現象の回避方法は以下になります。
- コメントアウトを消す
- コメントアウトを要素の内側に入れる
- IE7の対応をしない
IE7の対応をしないのが一番ですね！！
もし万が一IE7に対応しつつでコメントアウトをしたい場合は、コメントアウトの位置を内側に入れる方法が良さそうです。
コメントアウトを要素の内側に入れる
例えば以下のようにしていたとしましょう。
Item...
Item...
もしこのHTMLに対して、以下の様なCSSを書いても前述のとおり、IE7には適用されない。
/*css*/
.block {
margin-bottom: 30px;
}
.block + .block {
margin-top: -15px;
}
なのでコメントアウトの位置を要素の内側に移動する。
Item...
Item...
これで解決！やったね！！！
IE6でもバグが有った
IE6でも、「floatしている要素が連続している途中にコメントアウトがあると最後の要素が複製される」というようなバグが有る。
まとめ
IE6に対応するケースが極稀ですが、IE7はIE8がエミュレートできてしまう。
場合によっては Apache側でIE7指定 になっていることもあるので、気をつけよう。
＿人人人人人＿
＞ 嫌です ＜
￣Y^Y^Y^Y^￣
まだ後半に空きがあるので、ぜひご参加ください。
このカレンダーの日程は こちら から確認できます。