IE判定いろいろ #JavaScript

IE特有の挙動に対する修正って大変ですよね。
少しでもお役にたてたらと思います。

HTMLバージョン

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Style-Type" content="text/css"/>
    <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  </head>
  <!--[if lt IE 7 ]><body class="ie6"><![endif]-->
  <!--[if IE 7 ]><body class="ie7"><![endif]-->
  <!--[if IE 8 ]><body class="ie8"><![endif]-->
  <!--[if IE 9 ]><body class="ie9"><![endif<]-->
  <!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->

    <div class="something">
      <p>Hello, World</p>
    </div>

  </body>
</html>

具体的にはこう使います。

styles.css


.something{
    /**/
}

.ie6 .something{
    /* ie6のハック */
}

index.js


if ( $("body").hasClass("ie6") ){
    /* ie6に対する処理 */
}

JavaScriptバージョンその１

sample.js


var ie = (function(){
    var undef, v = 3, div = document.createElement('div');
    while (
        div.innerHTML = '<!--[if gt IE '+(++v)+']><i></i><![endif]-->',
        div.getElementsByTagName('i')[0]
    );
    return v> 4 ? v : undef;
}());

//IE以外のブラウザ
if(ie === undefined ) {
  //...
}


//IE7かどうか
if(ie === 7 ) {
  // ...
}


//IEを使っているかの判定
if(ie ) {
  // ...
}


//特定のバージョンのIEを使っているかの判定
ie === 6 // IE6
ie> 7 // IE8以上
ie <9 // IE9以下

JavaScriptバージョンその２

sample.js


//コメントアウトであってます。

/*@cc_on

  @if (@_jscript_version == 10)
    document.write("あなたはIE10を使っています");

  @elif (@_jscript_version == 9)
    document.write("あなたはIE9を使っています");

  @elif (@_jscript_version == 5.8)
    document.write("あなたはIE8を使っています");

  @else
    document.write("あなたはIE7かそれより古いのを使っています");

  @end

@*/

IE判定いろいろ

HTMLバージョン

JavaScriptバージョン その１

JavaScriptバージョン その２

JavaScriptバージョンその１

JavaScriptバージョンその２