今日は風がとても強い日です。部屋の窓から、秋桜が揺れているのが見えます。風にそよぐ秋桜は、なんだかいいですね。そこに赤とんぼがとまっていると、なおいいですね。あまりに風が強いので、花びらがぜんぶ散ってしまわないか、すこし心配です。
今日は、ウェブ制作者向けの情報です。次々とブラウザの新バージョンが発表され、IE 6 のシェアは低くなってきています。が、まだ対応を打ち切れるほどには、シェアは減っていません。バグの多い IE 6 への対応方法をまとめた資料(CSS Nite in Ginza, Vol.31 講演)を見つけました。ぜんぶ目を通したのですが、「しっかりツボを押さえているなあ」と感じたので、紹介します。
IE 6対応“6つのド定番”
- 文字サイズのトラブル
- px指定で文字サイズを変更できない
- tableに文字サイズが継承されない
- ボックスモデルバグ
- widthとともに左右パディング・ 左右ボーダーを指定した場合
- heightとともに上下パディング・ 上下ボーダーを指定した場合
→トラブル発生- ブロックレベル要素のセンタリング
- 「margin: 0 auto;」 でブロック要素が センタリングされない
- ボックスの自動拡張
- とても長い、連続する半角英数字
- 自分よりも大きな要素
- 列数のとても多い表
→親要素の大きさが、 自動的に大きくなってしまう- ダブルマージンバグ
- フロートと同じ方向へマージンを指定
- フロートを指定したボックスを入れ子にしすぎている時は逆でも
→マージンの大きさが倍に- hasLayout
- IEではそれぞれの要素が レイアウト情報を持っているかを判定
- レイアウト情報を持っていれば「true」
持っていなければ「false」- トラブルが発生!div, h1~h6, p, リストなど 幅や高さを持ってほしい要素なのに「false」として判定されてしまう
→トラブル発生引用元:CSSNiteGinza31-kobayashi-maboroshi.pdf (application/pdf オブジェクト).
IE 6 でのトラブルは、だいたいこの6つに集約されると思います。この6項目を頭に入れておくだけでも(回避方法まで覚えていなくても)、トラブルのときに調査/修正が早くなるかと思います。バグの回避方法については、引用元のPDF(スライド145ページの大作です)をご覧ください。「IE 6対応“6つのド定番”」は63ページからです。
IE 6 のバグに悩んだ時には、スライド144ページの絵のような気分になりますね。(スライドを作られた小林さんが、どんな気分でこの絵を置いたかはわかりませんが。)