いまだに苦労させられるIE6。
対処法が「IE6問題に対処する10のテクニック(マイコミジャーナル)」としてまとめられていたのでメモ。
- 必ず『DOCTYPE』を指定する。指定はHTML 4.01を採用する場合もXHTML 1.0を採用する場合もStrictを用いることが望ましい
- 不可視化や狂ったボックス配置といった多くの問題を避けるために『position:relative』を使うようにする。絶対位置指定を使う場合には子ノードの位置を注意深く確認すること
- マージン指定のあるフローティング要素でおこる”IE6ダブルマージンバグ”を回避するため、『display:inline』を使うようにする
- IE6のレンダリング問題を解決するために『hasLayoutプロパティ』を設定する
- フローティング要素に配置された最後の方の文字列がおかしくなる問題に対処するために『フローティング要素でdisplay:inlineを使
う』『最後のフローティング要素でmargin-right:-3pxを指定』『フローティング要素の最後のアイテムとして条件付きコメントを指定する』
『コンテナの最後の要素として空のdiv要素を指定する』といった対処を実施する - IE6はCSSホバー効果をa要素にしか適用できない。クリック可能部分やホバー効果を持たせる要素にはa要素を使う
- IE6に特化した指定をおこなうために!important指定を使ったり、Advanced Selectorを使う
- パーセント指定はIEでは混乱をきたすため避けるようにする
- 完成するまでIE6で試験を行わないと修正に長い時間がかかる。早期にそして頻繁に試験をおこなうべき
- コードのリファクタリングを実施する
読めば思い出すけど、普段は結構忘れていて、「なんで、なんで、なんで？」となっている問題の数々。特にFirefoxをメインのチェック環境にしているので、9番のようにある一定の区切りでチェックすると「がーん」となってしまうこともあって、時間のロスにもなってしまう。
だからといって、IE6をメインのチェック環境にするという意味ではない。時々、Firefoxで真っ白なページ（透明な文字）やレイアウトがなだれているページを、大手のサイトでも見つけたりする。