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

最近又开始忙了，项目中又遇到了可恶的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文档模式呈现）：

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

解决方法

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

<!--[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;

        }

    }

}

其实就是用正则来替换一下，成功达到目的(只让文档模式~~)：

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