MD.WEBLOG

長野県飯田市、フリーランス、ウェブデザイン、ホームページ制作、CMS構築、映像制作、エディトリアルデザイン - MITAMA DESING -

Go To Home

Blog

blogトップ > HTML / CSS > CSSハックを使わずIE6、IE7、IE8を条件付きコメントでバグに対処!


CSSハックを使わずIE6、IE7、IE8を条件付きコメントでバグに対処!

 2012年11月27日   タグ: , , ,

CSSハックを使わずIE6、IE7、IE8を条件付きコメントでバグに対処!
ウェブ制作において、おきまりといいますか、必ず対処しなくてはいけない問題にIEの旧バージョンへの対応という問題があります。その方法はCSSハックなどが最もよく使われている方法かと思います。今回はCSSハックを使わずに対応する方法を紹介します。

IE6、IE7、IE8を条件付きコメントでバグに対処!

方法はとても簡単です。条件付きコメントで、閲覧するIEのバージョンによって、HTMLタグに特定のIDを付加します。そのIDを使ってスタイルシートを記述します。

以下のように条件付きコメントで振り分けます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE 6 ]> <html xmlns="http://www.w3.org/1999/xhtml" id="ie6"> <![endif]-->
<!--[if IE 7 ]> <html xmlns="http://www.w3.org/1999/xhtml" id="ie7"> <![endif]-->
<!--[if IE 8 ]> <html xmlns="http://www.w3.org/1999/xhtml"  id="ie8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>

条件付きコメントの例

ブラウザがIE8の時

<!--[if IE 8]>

ブラウザがIE8未満の時(IE6もしくはIE7)

<!--[if lt IE 8]>

ブラウザがIE8以上の時(IE8もしくはIE9)

<!--[if gte IE 8]>

条件付きコメントは、もちろん bodyタグ内でも記述できるので、ブラウザのバージョンアップを促す注記を表示することもできます。

IE6、IE7、IE8以外のブラウザで表示した場合は何も表示されません。

以下のデモページをIETesterで各バージョンのIEで表示すると以下のようになります。

デモページ


IE6



IE7



IE8



IE9



CSSハックに関しては、以下の記事にまとめてありますので参考にしてください。

CSSハック一覧 -よく使うものをメモ- 【IE6、IE7、IE8、IE9、Firefox、Safari、chrome、Opera】

このエントリーをはてなブックマークに追加

  |  Blog TOP   |