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

        }

    }

}

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

条件注释+JS实现各版本IE浏览器className的更多相关文章

  1. IE条件注释，嗅探低版本IE用户，并引导升级

    一.科普IE条件注释 IE条件注释功能是条件注释是IE特有的一种功能,能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS.条件注释功能非常强大,可以进行true和fa ...

  2. HTML中的IE条件注释，让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案

    最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘.  HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...

  3. Js获取操作系统版本 && 获得浏览器版本

    //利用原生Js获取操作系统版本function getOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.plat ...

  4. 【转】通过js获取系统版本以及浏览器版本

    function getOsInfo() { var userAgent = navigator.userAgent.toLowerCase(); var name = 'Unknown'; var ...

  5. 前端备忘录 — IE 的条件注释

    CSS hack 由于不同厂商的浏览器,比如 Internet Explorer,Safari,Mozilla Firefox, Chrome 等,或者是同一厂商的浏览器的不同版本,如 IE6 和 I ...

  6. 关于IE条件注释（译）

    本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...

  7. 条件注释判断IE浏览器版本

    lt,lte,gt,gte分别表示什么 lt:小于当前版本 lte:小于或等于当前版本,包括本身 gt:大于当前版本 gte:大于或等于当前版本,包括本身 使用格式 // 如IE9以下(不包括IE9加 ...

  8. 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)

    前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...

  9. 使用条件注释判断 IE 浏览器版本

    IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...

随机推荐

  1. UINavigationController技巧<一>——修改返回按钮的标题

    UINavigationController 一般push到另一界面后,返回按钮标题便是上一页面的title,但是对于push的第一页或者是上一页面没有title的,返回按钮标题便是默认back,如图 ...

  2. Gulp思维——Gulp高级技巧

    本文翻译自Getting gulpy -- Advanced tips for using gulp.js 感受过gulp.js带来的兴奋过后,你需要的不仅仅是它的光鲜,而是切切实实的实例.这篇文章讨 ...

  3. MJExtension

    MJExtension 长话短说下面我们通过一个列子来看下怎么使用 1. 先把框架拉进去你的项目 2. 首先我这次用到的json最外层是一个字典,根据数据的模型我们可以把这个归类为字典中有数组,数组中 ...

  4. Csharp多态的实现(抽象类)

    1.什么是抽象类 抽象类是虚拟的类,不能创建对象,用abstract修饰,在子类中用override进行重写 抽象类中可以存放抽象方法,属性,也可以存放非抽象方法,属性(这个在下面的代码可以看出来的) ...

  5. CCF计算机认证——字符串匹配问题（运行都正确，为什么提交后只给50分？）

    我的程序: #include<iostream> #include<cctype> #include<string> #include<vector> ...

  6. jquery学习（3）--高级选择器

    自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器     ul li ...

  7. HTTP协议中的1xx，2xx，3xx，4xx，5xx状态码分别表示什么，列举常见错误码及含义

    转自:http://m.blog.csdn.net/blog/u013857407/21741847 HTTP协议状态码,是指在HTTP协议运作中由客户端发出请求连接,服务端建立连接,客户端发出HTT ...

  8. python之字符串格式化(format)

    用法: 它通过{}和:来代替传统%方式 1.使用位置参数 要点:从以下例子可以看出位置参数不受顺序约束,且可以为{},只要format里有相对应的参数值即可,参数索引从0开,传入位置参数列表可用*列表 ...

  9. the C programming language 阅读笔记2

    1. 指针 1.1 自增符的使用 ++*p;//p指向的内容加一 (*p)++; //p指向的内容加一 *p++;//p本身自增 *++p; //p本身自增 因为诸如*和++这样的一元运算符在表达式求 ...

  10. Httpwatch 工具介绍

    一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...