IE6問題に対処する10のテクニック

既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。

IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておきたい(紹介されているテクニックを適用するなら寄せられているコメントにも目を通してほしい)。

10 Fixes That Solve IE6 Problemsで紹介されているテクニックを簡単にまとめると次のとおり。

1. 必ず『DOCTYPE』を指定する。指定はHTML 4.01を採用する場合もXHTML 1.0を採用する場合もStrictを用いることが望ましい
2. 不可視化や狂ったボックス配置といった多くの問題を避けるために『position:relative』を使うようにする。絶対位置指定を使う場合には子ノードの位置を注意深く確認すること
3. マージン指定のあるフローティング要素でおこる"IE6ダブルマージンバグ"を回避するため、『display:inline』を使うようにする
4. IE6のレンダリング問題を解決するために『hasLayoutプロパティ』を設定する
5. フローティング要素に配置された最後の方の文字列がおかしくなる問題に対処するために『フローティング要素でdisplay:inlineを使う』『最後のフローティング要素でmargin-right:-3pxを指定』『フローティング要素の最後のアイテムとして条件付きコメントを指定する』『コンテナの最後の要素として空のdiv要素を指定する』といった対処を実施する
6. IE6はCSSホバー効果をa要素にしか適用できない。クリック可能部分やホバー効果を持たせる要素にはa要素を使う
7. IE6に特化した指定をおこなうために!important指定を使ったり、Advanced Selectorを使う
8. パーセント指定はIEでは混乱をきたすため避けるようにする
9. 完成するまでIE6で試験を行わないと修正に長い時間がかかる。早期にそして頻繁に試験をおこなうべき
10. コードのリファクタリングを実施する

10 Fixes That Solve IE6 Problemsのコメントには逆に!importantを使うべきではないという指摘や、ドキュメントで紹介されているテクニックや考え方への賛同や意見が記載されている。使うべきか否かは状況によって異なるが、採用を検討するうえで参考になる。