Takazudo Clipping*

ブラウザバグ回避用CSSセットアップ / IEバグ対処フロー

暇だからCSSのセットアップでも載せとく。
CSSレイアウトで問題になるのは、ブラウザごとにバグがあって、それに対応するのにどうするかっていうのが一番困る。でも、ブラウザごとにっていっても、実際に問題があるのは、ネスケ4とかIE4とかMacIEとの本当に古いブラウザと、バグの多いけどまだちょっと使っている人がいるIE5、IE5.5、まだまだこれからも高いシェアを続けていくIE6と、かなりましになったけどまだちょっと問題のあるIE7を、なんとかすればいい。逆に言えば、これら以外のブラウザには、フツーに何の仕掛けもなしに、きちんと表示される必要がある。FirefoxとかOperaは、かなりきちんと表示してくれるから。

要するに問題なのはIEばっかりなんだけれど、FirefoxやOperaできちんと表示されていれば、IEでボロボロになってても、大して心配はない。一定の流れでバグ回避をしていけば、ほとんどきちんと表示されるようになる。だから、コーディング中は、IEを無視して、Firefoxできちんと表示されるように作るのが、第一ステップ。でも、CSSの対応具合で、実現できないのもあるから、その点は注意するとして。

というわけでFirefoxできちんと表示されるようになったんだけど、IEではいぜん、ボロボロのまま。フツーにCSSを書いているつもりなんだけど、全然ちゃんと表示されない。そんな時、IEで起こっている問題は、大体決まってる。IEのCSSバグの問題点は、大体以下の通り

背景画像が出ない
borderが出ない
よくわかんないけど一杯余白が空く
なんか背景出たり出なかったりちかちかする
とにかくなんか変
互換モード時にboxサイズの算出方法が違う
横方向のmarginに指定するautoがきかない
floatにleft/rightを指定した要素の横マージンが2倍になることがある
borderのdottedがdashedになる
インライン要素に指定したmargin,paddingがきかない(IE5のみ)
垂直方向のmarginが相殺されない

滅茶苦茶一杯おかしいところがあるけど、1個ずつつぶしていけば大体直る。
それに、問題があるのは、IEの各バージョンだけなので、各ブラウザにのみ読み込ませるスタイルシートファイルを作って、そいつに、バグ対処を書いていく。自分がいつも使ってるのはこんな感じ。

CSSセットアップ

オレンジのファイルにバグ対処の指定をかきこんでく。
例外として、ie67ってのは、IE6 / 7の両方に読み込まれるので、こんな感じで、このファイル内で、IE6向けにはスターハックで書く。それぞれのバグ対処についてだけれど、まず、

背景画像が出ない
borderが出ない
よくわかんないけど一杯余白が空く
なんか背景出たり出なかったりちかちかする
とにかくなんか変

については、IE6以下において、問題のある要素にheight:0を指定すれば直る。これは有名なholly hackという方法で、IEは、widthかheightが指定されていると、問題無くなることがほとんど。全部にwidthを指定するのは現実的でないので、height:0を指定する。IE7の互換モードと、IE6以前では、heightに少ない値を指定しても、内容によって要素の高さが拡大されるため、height:0を指定しても、何も問題ない。これを、1個1個確認していくのはめんどい。そこで、background,borderが指定されている全てのブロック要素に、height:0を指定する。IE7の場合は、*{zoom:1}を指定すれば直る。理由はIE7のズーム機能でバグるを参照。