条件注释+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文档模式呈现）：
解决方法
使用改进的条件注释语句：
<!--[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的更多相关文章
- IE条件注释，嗅探低版本IE用户，并引导升级
一.科普IE条件注释 IE条件注释功能是条件注释是IE特有的一种功能,能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS.条件注释功能非常强大,可以进行true和fa ...
- HTML中的IE条件注释，让低版本IE也能正常运行HTML5+CSS3网站的3种解决方案
最近的项目中,因为需要兼容IE7,IE8,IE9,解研究了IE的条件注释,顺手写下来备忘. HTML中的IE条件注释 IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解. ...
- Js获取操作系统版本 && 获得浏览器版本
//利用原生Js获取操作系统版本function getOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.plat ...
- 【转】通过js获取系统版本以及浏览器版本
function getOsInfo() { var userAgent = navigator.userAgent.toLowerCase(); var name = 'Unknown'; var ...
- 前端备忘录 — IE 的条件注释
CSS hack 由于不同厂商的浏览器,比如 Internet Explorer,Safari,Mozilla Firefox, Chrome 等,或者是同一厂商的浏览器的不同版本,如 IE6 和 I ...
- 关于IE条件注释（译）
本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...
- 条件注释判断IE浏览器版本
lt,lte,gt,gte分别表示什么 lt:小于当前版本 lte:小于或等于当前版本,包括本身 gt:大于当前版本 gte:大于或等于当前版本,包括本身 使用格式 // 如IE9以下(不包括IE9加 ...
- 浏览器兼容处理(HTML条件注释、CSSHack和JS识别)
前面的话 本文中所有IEx+代表包含x及x以上:IEx-代表包含x及x以下,仅个人习惯.例:IE7+代表IE7.IE8…… 本文中所有例子全部经过测试,欢迎交流. HTML识别 条件注释法(IE10+ ...
- 使用条件注释判断 IE 浏览器版本
IE条件注释是一种特殊的HTML注释,这种注释只有IE5.0及以上版本才能理解.比如普通的HTML注释是: <!--This is a comment--> 而只有IE可读的IE条件注释是 ...
随机推荐
- 移动前端不得不了解的HTML5 head 头标签（2016最新版）
小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...
- ASP.NET递归添加树节点
表设计如图: id title parentid 1 asp.net 0 2 c# 0 3 c#_ ...
- python退格、方向键无法正常使用解决方法
CentOS 6.5 自带的Python 2.6.6 箭头以及退格键(Backspace)可正常使用: 自定义所安装的Python 2.7.6却发现箭头以及退格键(Backspace)在使用的时候出现 ...
- 理解C语言声明的优先级规则
声明从它的名字开始读取,然后依次按优先级依次读取. 优先级从高到低依次是 声明中被括号括起来的那部分 后缀操作符: 括号()表示这是一个函数 方括号表[]这是一个数组 前缀操作符:星号*表示“指向.. ...
- MVC自学第三课
上一课我们已经能够做出简单的HTML显示页面,并懂得了MVC的工作模式,这一课我们讲解一些动态的数据交互. 在MVC中,控制器的工作是构造某些数据,而视图的工作是把它渲染成HTML.数据是从控制器传递 ...
- 深入学习PE文件（转）
PE文件是Win32的原生文件格式.每一个Win32可执行文件都遵循PE文件格式.对PE文件格式的了解可以加深你对Win32系统的深入理解. 一. 基本结构. 上图便是PE文件的基本结构.(注意:DO ...
- CDC变更数据捕获
CDC变更数据捕获 (2013-03-20 15:25:52) 分类: SQL SQL Server中记录数据变更的四个方法:触发器.Output子句.变更数据捕获(Change Data Cap ...
- Javascript面向对象之创建对象
面向对象的语言具有一个共同的标志,那就是具有“类”的概念,但是在javascript中没有类的概念,在js中将对象定义为“无序属性的集合,其属性可以包含基本值,对象或者函数”,即其将对象看作是一组名值 ...
- 这才是正确删除 office 的方式
https://support.office.com/zh-cn/article/%E9%80%9A%E8%BF%87%E5%9C%A8%E9%87%8D%E6%96%B0%E5%AE%89%E8%A ...
- eclipse 快捷方式大全
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...