条件注释+JS实现各版本IE浏览器className

浏览数：32 / 时间：2015年06月09日

最近又开始忙了，项目中又遇到了可恶的IE Hack问题，各种Hack的看着让自己都觉得恶心，于是决定改造一番。

首先请出条件注释语句：

之前用过的条件注释

<!--[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 !IE]><!--><body><!--<![endif]-->

但是这种用法的问题想必大家也都知道，就是：class里只会出现与浏览器模式（Browser Mode）对应的那个类名，不会出现你所期望的文档模式（Document Mode）对应的类名，如下面截图（在IE9浏览器中，设置页面以IE8文档模式呈现）：

技术分享

解决方法

使用改进的条件注释语句：

<!--[if lt IE 7]><body class="ie6 ielt7 ielt8 ielt9 ielt10 ie"><![endif]-->
<!--[if IE 7]><body class="ie7 ielt8 ielt9 ielt10 ie"><![endif]-->
<!--[if IE 8]><body class="ie8 ie"><![endif]-->
<!--[if IE 9]><body class="ie9 ie"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><body><!--<![endif]-->

配合JS代码（否则还是没用滴~~）：

var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
var gtIE8 = isIE && !!document.documentMode;
var isIE7 = isIE && !isIE6 && !gtIE8 || (document.documentMode==7);
//Reset body class for IE8+ CSS hack
if(gtIE8){
    window.onload = function(){
        if( document.getElementsByTagName("body")[0] ){
            if( !document.documentMode ) return;
            var classStr = document.getElementsByTagName("body")[0].className;
            classStr = classStr.replace(/\sielt\d+/g, "");
            classStr = classStr.replace(/ie\d+/g, "ie" + document.documentMode);
            for(var i = document.documentMode+1, j = 10; i <= j; i++ ){
                classStr += (" ielt"+i);    
            }
            document.getElementsByTagName("body")[0].className = classStr;
        }
    }
}