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

时间:2023-01-11 17:51:32

最近又开始忙了,项目中又遇到了可恶的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

解决方法

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

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

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

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

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