IE判定いろいろ

More than 5 years have passed since last update.

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バージョン その1


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バージョン その2


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

@*/