« Air Mac Express | メイン | NN4x、IE4x以下のブラウザにCSSを読み込ませないようにする »

WinIE6以上とIE5x以下との違いを考慮したCSS

Win IE6以上の標準モードと、IE5x以下では、ボックスの幅の解釈や、文字スタイルの継承方法が異なるため、厳密にCSSを利用するときには、IE6・NN6以上・Opera・MacIE5.2など上位標準CSSと、WinIE5x以下用のCSSを分けて用意するのが理想的。

Voice-family hack(Box Model Hack)を使う
IE6・NN6以上・Opera・MacIE5.2などとWin IE5xの違いの中でももっとも致命的なものは、ボックスの幅の解釈の違い。
その違いを個別に裏技で回避する。

.haba {
padding: 20px;
border: 10px solid #FF0000;
width:460px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}

width:460px(4行目)はWin IE5以下専用の指定。
460とは、正常な値400pxに、WinIE5の誤った解釈20×2+10×2の計60pxを足したもの。

voice-family: "\"}\""; バックスラッシュエスケープ「\」のがハック。
プログラマーではないのでよくわからないが、IE6など多くブラウザは\後はいわゆる「バックスラッシュエスケープ」で
単なる文字列として扱われるらしく、結局
voice-family: "}";
のような意味、つまり音声ブラウザ読み上げ時の声の種類が「}」だと指定する。
もちろんこれは意味不明な指定で、 その後
voice-family:inherit;
(inherit=”前の値を継承する”)と上書きして、正常にもどす。そして最後に
width:400px;
と正しい幅を上書き指定する。

ところがWinIE5以下では、バックスラッシュエスケープ「\」を解釈せず、
voice-family: "\"}
の部分で「.haba」のクラス指定を「}」終えてしまうため、その後のvoice-family:inherit;、width:400px;は読み込まれない。

なおこのハックを利用すると、IE5ではvoice-familyに変な値を指定してしまっていることになるが、
voice-familyプロパティはもともとIE5で対応していないので、 実害はない。

最近は、これを個別にいちいち指定するのは面倒なので、バックスラッシュエスケープを応用した別のハックを利用するのが流行のようだが、
とりあえずこれが基本のようなので分析してみた次第。



コメント

My opinion is that this website is one of those, created for people with a low intellect level, with a stupidest points of view ever. Seems like only retards gathered together here, to discuss their retarded thoughts. Just read there comments! Man! It’s hilarious. They all act like kids in kindergarten, but kids are even smarter!