HTML5＆CSS3 4-05
IEへの対応（２）
従来のCSSでも必要になるIE7対策

IE7以前のWeb上でのシェアは少なくなってきているものの、まだまだクライアントに過去のIE対応を求められることも多い。CSS3からは離れるが、ここでは将来を見据えてCSSハックを使用しないIE7 対策の手法と注意点について見ていこう。

制作・文／小川和真（ビヨンド・パースペクティブ・ソリューションズ株式会社）

BROWSER IE…7over

CSSハックを使わずにIE7に対応する

CSSハックは、特定のブラウザのバグや対応状況の違いに対処するために記述するもので、特に旧バージョンのIEに対応するために用いるケースが多い。だが、ものによってはCSSの構文として好ましくない記述だったり、今後登場する新しいバージョンのブラウザでの動作が保証できない場合もある。そのため、できることならCSSハックを使用しないほうが望ましい。

ここでは、レガシーブラウザでありながら、いまだに対応を求められるケースが多いIE7において、CSSハックを使用せずに対応する方法について紹介しよう。

マージンが効かない場合の対処

IE7では特定の条件の時にマージンの指定が効かないバグが存在する。

具体的には、以下の条件のとき1つ目の子要素のマージンが効かないバグが発生する。

・paddingが0以外のブロック要素Aに囲まれている
・A の最初の子要素（空白・TAB・改行以外）がブロック要素B である
・Bにheightとmarginが指定してある上記を満たすHTMLの記述例は【01】となる。

このHTMLをブラウザ上で表示するとIE8以上やFirefox,Chromeでは「こんにちは」と「ハロー」の左端はほぼ揃う【02】。一方、IE7では、1つ目の子要素である「こんにちは」がmarginの指定が効かずに左端に寄ってしまう【03】。

この問題を回避する方法として、1つ目の子要素を先頭要素でなくすことで回避できる。たとえば、１つ目の子要素の前にコメントを入れておくとよい【04】。

【01】マージンが効かないHTML の記述例。

【02】Firefox やChrome ではほぼ左端が揃う。

【03】IE7の場合は、１つ目の子要素にmarginが効かず左に寄ってしまう。

【04】マージンが効かないバグの対処コード。2 行目のコメントがポイントだ。

z-indexの挙動を修正

IE7 以外のブラウザでは、z-index の値が大きい要素が前面に表示されるようになっている。だが、IE7では、同一階層間での重ねの順序を指定するようになっている。たとえば【05】のような指定をした場合、FirefoxやChromeなどと、IE7とでは、z-indexに対する解釈が異なるため、他のブラウザと異なった挙動をしてしまう【06】【07】。

この挙動を回避するためには、【08】のように1つ上の親要素の階層間でz-indexを指定する必要がある。

【05】IE7 でz-index が効かないコード。

【06】Firefoxではz-indexの値が大きいwhiteが全面に表示される。

【07】IE7 ではz-index が効かず表示が変わってしまう。

【08】IE7 に対応したz-index の指定。

フロート要素を扱う際の注意

ボックスサイズにフロート要素のサイズが含まれる問題

通常、横幅や高さを算出する際にボックス内にフロート要素が存在する場合は、そのフロート要素の情報は除外される。

しかし、IE7では、フロート要素の親要素に横幅、または高さが指定してある場合、フロート要素の横幅や高さの情報を含めて親要素のボックスサイズを算出してしまうといった問題がある【09】。

【10】に問題となるコードを記載する。この問題は親要素の高さと横幅を指定しないことで回避できる。

【09】フロートしている親要素に幅を指定したときの表示の違い。左がFirefox、右がIE7。黄色い部分のスペースが異なる。

【10】IE7でフロート要素の情報が親要素のボックスサイズ指定に影響を及ぼす書き方。

フロート要素の下マージンをとる位置が異なる問題

IE7 では、回り込みさせた要素にmargin-bottomを指定すると他のブラウザと異なった位置にマージンをとる【11】。

上記を再現するコードは【12】のようになる。

フロートした要素の下にマージンをとりたい場合は"clear: both;"を使ってフロートを解除し、マージンを指定するとよい。

【11】回りこみをしている要素に下マージンを指定したときの表示の違い。左がFirefox、右がIE7。黄色い部分のスペースが左右で異なる。

【12】IE7 で下マージンのとり方が他のブラウザと異なるコード。

[目次に戻る]

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。