CYOKOLOG

IE8以降の互換表示設定

IE8以降 には互換表示設定（ツールバーの[ツール]→[互換表示設定]）というのがあり、[イントラネットサイトを互換表示」のチェックボックスがオンになってると IE8以降のバージョンであっても IE7 としてレンダリングされてしまう。 これを防ぐためには X-UA-Compatible で レンダリングしたい IE のバージョンを指定する。X-UA-Compatible の記述は head 要素内の先頭か charset を指定する meta 要素の次当たりにするのが無難（script や style 要素の後だと適用されない）。

<meta http-equiv="X-UA-Compatible" content="IE=8;IE=9"/>

上記のように複数バージョンを指定した場合は、指定バージョンの中から適用可能な最上位バージョンが適用される。上記例の場合 IE8 で閲覧した場合は IE8、IE10 で閲覧した場合は IE9 でレンダリングされる。

X-UA-Compatible で指定できるバージョンの種類

IE=5、IE=7、IE=8、IE=9、IE=edge 等が指定できる。IE=edge は適用可能な最上位バージョンが適用される。また、IE=EmulateIE7、IE=EmulateIE8 という指定もでき、IE7 や IE8 の挙動をエミュレートする。具体的な違いとしては、IE=7 / IE=8 では、DOCTYPE 宣言の有無に関わらず強制的に IE7 / IE8 のレンダリングをするが、IE=EmulateIE7 / IE=EmulateIE8 では　DOCTYPE 宣言が無いと Quirksモードとなる（互換モードといわてるもの。IE5 のようにレンダリングされる）。

IE=6 の指定はできず IE=4 や IE=6 と指定した場合は IE=5 と同じ挙動となる。つまり、IE6 時代に Web 標準に準拠して作られたレガシーシステムを新しい IE で動かすためには IE5 ,IE7 あたりで動作するようにソースを見直し、必要に応じ X-UA-Compatible を指定する必要がある。

JavaScript における IE のバージョン判定

JavaScript では、navigator.userAgent や jQuery.browser.version の値で IE のバージョンを判断できるが、これらは X-UA-Compatible の指定、DOCTYPE 宣言の有無は考慮されていない。なので jQuery プラグインのように汎用的に使用されることを前提に組むロジックでは、jQuery.browser.version などの値を参照し処理分岐する実装をしてると想定しない挙動になってしまう可能性がある。（DOCTYPE 宣言はともかく X-UA-Compatible が無視されてしまうのは困る）

X-UA-Compatible や DOCTYPE 宣言の有無の影響によりレンダリングされた IE のバージョンは IE8 以上では document.documentMode 、IE5-IE7 では document.compatMode を参照することで知ることが可能。

<script type="text/javascript">
engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8 or later
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
      // There is no test for IE6 standards mode because that mode  
      // was replaced by IE7 standards mode; there is no emulation.
   }
   // the engine variable now contains the document compatibility mode.
}
alert(engine);
</script>

via ttp://msdn.microsoft.com/en-us/library/cc196988(VS.85).aspx

各バージョンで新規に実装された機能が働くか否かでバージョンを判定する

具体的には以下のように position : fixed が機能しなければ IE6 以下、display : inline-block が機能しなければ IE7 以下と判断する。

var hasFixed = function(){
    var v = $.browser.version;
    if(!$.browser.msie) return v;
    var e1 = $('<div>&nbsp;</div>').css({position:'fixed',top:0}).prependTo('body');
    var e2 = e1.clone().prependTo('body');
    var ret = e1.offset().top == e2.offset().top;
    e1.remove();
    e2.remove();
    return ret;
}
var hasInlineBlock = function(){
    var v = $.browser.version;
    if(!$.browser.msie) return v;
    var e1 = $('<div>&nbsp;</div>').css({display:'inline-block'}).prependTo('body');
    var e2 = e1.clone().prependTo('body');
    var ret = e1.offset().top == e2.offset().top;
    e1.remove();
    e2.remove();
    return ret;
}
if(!hasFixed()){
    alert('IE6 以下');
}
else
if(!hasInlineBlock()){
    alert('IE7');
}
else{
    alert('IE8以上');
}

jQuery.browser.version やら document.documentMode を見てあーだこーだするぐらいなら、この方がよっぽど楽でいい。

まとめ

• IE8 以上の環境で最新システムとレガシーシステムが混在する場合、極力 X-UA-Compatible でレンダリングしたいバージョンを明示する
• X-UA-Compatible で IE6 は指定できないので Web 標準に準拠した IE6 ベースのシステムについては IE7 でも動作するようにソースを見直し、X-UA-Compatible で IE7 を指定する
• 汎用処理を JavaScript で書く場合は、バージョン情報で処理分岐をせず、使用したい機能が有効に働くか否かで処理分岐する