IE 6 のバグは「6つのド定番」で叩き斬る!

今日は風がとても強い日です。部屋の窓から、秋桜が揺れているのが見えます。風にそよぐ秋桜は、なんだかいいですね。そこに赤とんぼがとまっていると、なおいいですね。あまりに風が強いので、花びらがぜんぶ散ってしまわないか、すこし心配です。

今日は、ウェブ制作者向けの情報です。次々とブラウザの新バージョンが発表され、IE 6 のシェアは低くなってきています。が、まだ対応を打ち切れるほどには、シェアは減っていません。バグの多い IE 6 への対応方法をまとめた資料(CSS Nite in Ginza, Vol.31 講演)を見つけました。ぜんぶ目を通したのですが、「しっかりツボを押さえているなあ」と感じたので、紹介します。

IE 6対応“6つのド定番”

  1. 文字サイズのトラブル
    • px指定で文字サイズを変更できない
    • tableに文字サイズが継承されない
  2. ボックスモデルバグ
    • widthとともに左右パディング・ 左右ボーダーを指定した場合
    • heightとともに上下パディング・ 上下ボーダーを指定した場合
      →トラブル発生
  3. ブロックレベル要素のセンタリング
    • 「margin: 0 auto;」 でブロック要素が センタリングされない
  4. ボックスの自動拡張
    • とても長い、連続する半角英数字
    • 自分よりも大きな要素
    • 列数のとても多い表
      →親要素の大きさが、 自動的に大きくなってしまう
  5. ダブルマージンバグ
    • フロートと同じ方向へマージンを指定
    • フロートを指定したボックスを入れ子にしすぎている時は逆でも
      →マージンの大きさが倍に
  6. 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ページの絵のような気分になりますね。(スライドを作られた小林さんが、どんな気分でこの絵を置いたかはわかりませんが。)

This entry was posted in ホームページ制作メモ and tagged . Bookmark the permalink. Follow any comments here with the RSS feed for this post.

コメントをどうぞ

Your email is never published nor shared. Required fields are marked *

*

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>