XHTML+CSSでコーディングするときにブラウザのバグを知っているか知らないかでは大きく違いますよね。とりわけ他のブラウザよりバグが多いIE6さんのバグをまとめてみることにしました。そろそろIE7の自動配布が始まるころなので忘れないうちにということで。

とは言ったもののIE6のバグを改めて見てみると多い･･･多すぎるよ！逆にこれだけのブラウザがあるからこそコーダーという職種がある気さえしてきます。

今回は『CSSバグ辞典スレッド』の要約のWinIE CSSバグリストからIE6のバグを抜き出して自分でわかりやすいように種類わけしてみました。これで全てではないですがこれだけ知ってればかなりのケースで対応できると思います。

2012/07/31 追記: リンク先がなくなったのでリンクを外して一覧だけ残しときます。

ちなみにこの種類分けも厳密ではないのであしからず。

ボックスモデル

maring,padding,border,width,heigthの複合

• ボックスの幅や高さを算出するときにpaddingやborderのサイズを含めてしまう
• 左右borderとpaddingを設置した要素に後続する部分がずれる
• マージンに負数が指定された要素でボーダーがずれてゆく
• 親要素からはみ出した子孫要素の一部が消える
• インライン要素に指定したパディングやボーダーの上下が消える
• 幅や高さを指定した要素でdoubleボーダー領域に背景が描画されない
• ボックスサイズが内容物に合わせた大きさへ強制的に調整される
• 親にボーダーを設置した要素を持つ要素のマージン設置が正しくない
• 幅や高さを指定した要素の子孫要素でデフォルト指定のマージンが消える

width,height

• 初期コンテナブロックを生成する要素の幅を指定できない
• ボックスの高さを特定の値より小さくできない

border

• 一部のボーダーはcolorの値を引き継がない
• border-colorにtransparentを指定すると前景色で表示される

視覚整形モデル

float

• 背景色が指定された要素内にfloatがあるときに要素内の文字が消える
• 幅や高さを指定した要素ではボックスサイズの算出時にfloatを除外しない
• floatに後続するボックスの幅がfloatに合わせて短縮される
• 先行するfloatの上方に後続のfloatが置かれる
• 幅や高さを指定した要素内にあるfloatの下マージンが無視される
• floatの左右マージンが指定値より大きくなる
• インライン要素に挟まれているfloatが下にずれて置かれる
• floatの上部に祖先要素の上ボーダーを表示する
• clearを指定した要素ではfloatに対して上マージンを設置する
• clearを指定したfloatの上下に空行ができる
• floatを含むボックスのマージンが無視される
• floatの左右にある行の端がずれる
• 親要素のボックスからはみ出すボックスがfloatの下に置かれる
• コメントがfloatの位置をずらす
• p要素などをfloatにすると上マージンが消える
• floatに隣接する要素は親要素との間で上下マージンが相殺されない

clear

• clearを指定したボックスの内側上部に隙間が空く
• clearの指定が親要素にも影響する

position

• left, topが指定された要素ではright, bottomを認識しない
• line-heightが指定された相対配置要素の上ボーダー上端が消える
• 相対配置した要素へ向かうリンクのジャンプ先が移動前の位置になる
• 直後に背景色つきのhr要素がある絶対配置要素の初期位置がずれている

display

• ブロック化したアンカーの範囲が内容物の部分のみになる
• head要素と子孫要素のdisplayプロパティを変更できない
• ルビ関連要素のdisplayプロパティを変更できない

フォント、テキスト

line-height

• 全体にline-heightが指定されたページの最上部が消える
• line-heightで算出した行高を超える部分が表示されない
• 非置換インライン要素に対するline-heightの指定を無視する

letter-spacing

• letter-spacingを指定した要素内で連続したbr要素が無視される

font

• font-familyを指定した要素で文字化けする
• em単位で指定した値が文字サイズ変更後に正しく反映されない
• 見出し要素でfont-sizeを算出する際に親要素の値を参照しない
• em単位で指定した字間をbody要素の文字サイズを基準に算出する
• OpenTypeフォントを用いて2バイト文字を表示することができない

vertical-align

• line-heightが指定された要素内でvertical-alignの%値指定が正しく反映されない
• 擬似要素にvertical-alignプロパティが効かない
• vertical-alignが指定された要素を含む行が前後の行に重なる
• vertical-align:middle;の状態では置換インライン要素だけの行の高さ算出が不正
• 最も高さが大きい要素にvertical-align:bottom;を指定すると配置が狂う

white-space

• white-space:nowrap;を指定した要素の内部が表示されない

text-decoration

• 親要素のtext-decorationの効果を子要素で解除できる

background

• インライン要素のrepeat-x背景画像が1行目にしか表示されない

リスト、表

li

• ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る
• 幅が指定されたリスト要素のマージンが正しく反映されない
• 絶対配置／float状態のリストアイテム要素のリストマーカーが消える
• 先頭にfloatがあるリストアイテム要素でリストマーカーが要素内に入り込む
• パディング・幅・高さを指定したリストでリストマーカーが壊れる
• リストマーカーの番号が途中から振られる
• li要素でvertical-alignがテキストの配置に影響を与える

table

• 表の行グループ要素に指定したheightプロパティがセル要素に継承する
• 幅を指定していないテーブルでも固定レイアウトが有効
• collapseボーダーをvisibilityで非表示にできない
• 相対配置要素内のテーブル行グループ要素のスタイルが外部にはみ出す
• 固定レイアウト表で列の幅が小さくなる
• table要素の上マージンがcaption要素の上に設置される

その他

overflow

• 幅と高さが明示されていない要素へのoverflow:hidden;指定が完全に反映されない
• overflow:scroll;等が指定された要素の背景画像が閲覧領域に対して固定されない
• overflowでスクロールバーが出るときの高さ計算が正しくない
• overflowへの対応が不完全な要素

z-index

• bodyにz-indexを指定すると子孫要素の背景指定が無視される
• z-indexを負の数にしたリンクを選択できない

form

• テキスト入力フォームの幅が文字入力時に変化する
• fieldset要素の上パディングがボーダー領域の外側に設置される
• 終了タグを省略したoption要素に続くoptgroup要素を無視する
• 背景を指定したフォーム部品で視覚スタイルが無効になる

hr

• hr要素に指定した下マージンが親要素の下マージンとして反映される

セレクタ、擬似要素、擬似クラス

• アンカーを:hover状態にすると%値指定のマージンやパディングの量が変化する
• 擬似要素名称の直後に空白類文字を置かないと擬似要素が認識されない
• 「#」だけをセレクタとして指定すると全称セレクタのように扱われる
• 擬似要素を含む要素に後続する要素の内容物が左右にはみ出る
• visited擬似クラスの宣言が詳細度を無視してカスケード処理される
• アンカーを:hover状態にすると親ブロックの高さが変化する
• アンカーを:hover状態にすると後続するfloatの一部が消える
• アンカーを:hover状態にするとbody要素のサイズが縮む
• アンカーを:hover状態にするとiframe要素のサイズが変化する

未分類

• 閲覧領域からはみ出す要素がない状態でもスクロールバーが表示されることがある
• body要素の内容領域をはみ出す部分がレンダリングされない
• 行の高さを正しく算出しない
• 代替スタイルシート内の指定をprintメディアに反映しない
• インライン要素内のブロック要素がインライン要素のスタイルを継承する
• 同一ブロック内では!importantが無視される

主要なバグだけ書き出そうと思ったら、結局こんなにいっぱい書き出してしまった・・・今度時間があったらこのバグたちがIE7でどれだけ直っているか検証しようかな。

ちなみにIE6のバグの回避方法については下記サイトがかなり参考になります。

CSSレイアウトの定石　WinIE6バグ回避法