62
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

IE対応のためのおすすめテクニック

マークアップでもJavaScript書くときも、
スタイリッシュにIE用の処理を切り替える方法を紹介します。

まずHTML側のbodyタグを以下のようにします。

<!--[if IE 6]><body class="ie6 lteie7 lteie8 ie"><![endif]-->
<!--[if IE 7]><body class="ie7 lteie7 lteie8 ie"><![endif]-->
<!--[if IE 8]><body class="ie8 lteie8 ie"><![endif]-->
<!--[if IE 9]><body class="ie9 ie"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->

IE用分岐タグでbodyタグをIEバージョン別につくります。
この方法はhtmlタグで行っているものもよく見ますが、個人的にはbodyタグが好きです。

こうすることで、CSS的には

/* IE全部 */
body.ie #element {
  color: white;
}

/* IE8以下 */
body.lteie8 #element {
  color: yellow;
}

/* IE6だけ */
body.ie6 #element {
  color: red;
}

といったような感じでスタイルを分けられるわけです。

JSの場合は、

if($("body").hasClass("lteie8")) {

  // IE8以下の処理

} else {

  // IE8以下以外の処理

}

(jQuery使用想定)

といった感じで処理を分けられます!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
62
Help us understand the problem. What are the problem?