浏览器兼容处理(HTML条件注释、CSSHack和JS识别)
前面的话
本文中所有IEx+代表包含x及x以上;IEx-代表包含x及x以下,仅个人习惯。例:IE7+代表IE7、IE8……
本文中所有例子全部经过测试,欢迎交流。
HTML识别
条件注释法(IE10+已经不支持条件注释)
【注意】两个--和左中括号[之间不能有空格,否则无效
[1]IE9-(<!--[if IE]><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <!--[if IE]> <div class="box" id="box"></div> <![endif]--> </body> </html>
[2]仅单一IE(<!--[if IE 6]><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <!--[if IE 7]> <div class="box" id="box"></div> <![endif]--> </body> </html>
[3]大于 gt || 大于等于 gte || 小于 lt || 小于等于 lte(<!--[if gte IE 8]><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <!--[if gte IE 7]> <div class="box" id="box"></div> <![endif]--> </body> </html>
[4]非IE(IE10+也能识别),此处多加的<-->,在IE中被当作内部注释,而在非IE浏览器中会闭合之前的注释(<!--[if !IE]><--><![endif]-->)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <!--[if !IE]><--> <div class="box" id="box"></div> <![endif]--> </body> </html>
CSS hack
【1】属性前缀法(只有IE支持)
[1]IE6-(下划线、中划线)(_color:blue;-color:blue;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; _background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[2]IE7-(星号、加号)(*color:blue;+color:blue;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; *background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[3]IE10-(\9)(color:blue\9;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; background-color: red\9; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[4]IE8+(\0)(color:blue\0;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; background-color: red\0; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[5]IE9、IE10(\9\0)(color:blue\9\0;)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ height: 100px; width: 100px; background-color: red\9\0; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
【2】选择器前缀法
[1]IE6-(*html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *html .box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[2]IE7(*+html)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *+html .box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[3]IE8(@media \0)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @media \0{ .box{ height: 100px; width: 100px; background-color: red; } } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[4]IE9+及其他非IE浏览器(:root)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> :root .box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[5]firefox(x:-moz-any-link,)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> x:-moz-any-link,.box{ height: 100px; width: 100px; background-color: red; } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
[6]chrome、safari、opera(@media screen and (-webkit-min-device-pixel-ratio:0))
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @media screen and (-webkit-min-device-pixel-ratio:0) { .box{ height: 100px; width: 100px; background-color: red; } } </style> </head> <body> <div class="box" id="box"></div> </body> </html>
JS识别
【1】能力检测
【补充1】使用JS能力检测的注意事项,以检测sort排序为例
function isSortable(object){ return !!object.sort; }
上面这个函数通过检测对象是否存在sort()方法,来确定对象是否支持排序。但问题是任何包含sort属性的对象也会返回true
var result = isSortable({sort:true});
检测某个属性是否存在并不能确定对象是否支持排序,更好的方式是检测sort是不是一个函数
function isSortable(object){ return typeof object.sort == "function"; } //上面的typeof操作符用于确定sort的确是一个函数,因此可以调用它对数据进行排序
【补充2】
[BUG]在IE中typeof xhr.open会返回"unkown"
if(window.ActiveXObject){ var xhr = new ActiveXObject("Microsoft.XMLHttp"); alert(typeof xhr.open) }
[解决]在浏览器环境下测试任何对象的某个特性是否存在使用下面这个函数
function isHostMethod(object,property){ var t = typeof object[property]; return t == "function" || (!!(t == "object" && object[property])) || t== "unknown"; }
[1]IE7-(特性节点的specified属性)
IE7-浏览器中,获取特性节点将获得包括内置特性的所有特性,第0个特性节点是onmsanimationiteration,且其specified属性是false。而IE8+及其他浏览器仅仅可以获得经过设置的特性节点,且specified属性永远是true
function lteIE7(obj){ var temp = obj.attributes[0]; return (Boolean(temp) && !temp.specified); }
[2]IE8-(document.createElement)
IE8-的宿主对象是通过COM而非JScript实现的。因此,document.createElement()函数确实是一个COM对象,所以typeof才会返回"Object"
if(typeof document.createElement == "Object"){ alert(1) }
[3]IE10-(document.all)
if(document.all){ alert(1) }
[4]IE10-(activeXObject)
if(window.ActiveXObject){ alert(1) }
[5]chrome、opera(chrome)
if(window.chrome){ alert(1) }
【2】userAgent
[1]IE
function isIE(){ var ua = navigator.userAgent; //检测Trident引擎,IE8+ if(/Trident/.test(ua)){ //IE11+ if(/rv:(\d+)/.test(ua)){ return RegExp["$1"]; } //IE8-IE10 if(/MSIE (\d+)/.test(ua)){ return RegExp["$1"]; } } //检测IE标识,IE7- if(/MSIE (\d+)/.test(ua)){ return RegExp["$1"]; } } console.log(isIE());//只有IE会返回版本号,其他浏览器都返回undefined
[2]chrome
function isChrome(){ var ua = navigator.userAgent; //先排除opera,因为opera只是在chrome的userAgent后加入了自己的标识 if(!/OPR/.test(ua)){ if(/Chrome\/(\S+)/.test(ua)){ return RegExp["$1"]; } } } console.log(isChrome());//只有Chrome会返回版本号,其他浏览器都返回undefined
[3]safari
function isSafari(){ var ua = navigator.userAgent; //先排除opera if(!/OPR/.test(ua)){ //检测出chrome和safari浏览器 if(/Safari/.test(ua)){ //检测出safari if(/Version\/(\S+)/.test(ua)){ return RegExp["$1"]; } } } } console.log(isSafari());//只有safari会返回版本号,其他浏览器都返回undefined
[4]firefox
function isFireFox(){ if(/Firefox\/(\S+)/.test(navigator.userAgent)){ return RegExp["$1"]; } } console.log(isFireFox());//只有firefox会返回版本号,其他浏览器都返回undefined
[5]opera
function isOpera(){ var ua = navigator.userAgent; if(/OPR\/(\S+)/.test(ua)){ return RegExp["$1"]; } } console.log(isOpera());//只有opera会返回版本号,其他浏览器都返回undefined
浏览器兼容处理(HTML条件注释、CSSHack和JS识别)的更多相关文章
- HTML下在IE浏览器中的专有条件注释
在进行WEB标准网页的学习和应用过程中,网页对浏览器的兼容性是经常接触到的一个问题.其中因微软公司的Internet Explorer(简称IE)占据浏览器市场的大半江山,此外还有Firefox.Op ...
- 浏览器兼容之条件注释,cssHack
对于形形色色的浏览器,随之而来的就是一些兼容问题,大多应该都是IE下的兼容问题,因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而先造 ...
- 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"> <head> <me ...
- ie的兼容方法,条件注释的方法
1.终极方法:条件注释 <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本. <![endif]--> <!--[if gte IE 6]&g ...
- HTML的条件注释及hack技术
在很多时候,前端的兼容性问题,都很让人头痛!幸运的是,微软从去年声明:从2016年1月12日起,微软将停止为IE8(包括IE8)提供技术支持和安全更新.整个前端圈子都沸腾起来,和今年七月份Adobe宣 ...
- HTML条件注释
前面的话 IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句,作用是可以灵活的为不同IE版本浏览器导入不同html元素.很显然这种方法的最大好处就在于属于微软官方给出的兼容解决办法而且还能通过W ...
- 针对主流浏览器的CSS-HACK写法及IE常用条件注释
一.通用区分方式: IE6.IE7能识别*,标准浏览器(如FF)不能识别*:IE6能识别*,但不能识别 !important:IE7能识别*,也能识别 !important:IE8能识别\0,不能识别 ...
- 条件注释+JS实现各版本IE浏览器className
最近又开始忙了,项目中又遇到了可恶的IE Hack问题,各种Hack的看着让自己都觉得恶心,于是决定改造一番. 首先请出条件注释语句: 之前用过的条件注释 <!--[if lt IE 7]> ...
- 条件注释判断IE浏览器版本
lt,lte,gt,gte分别表示什么 lt:小于当前版本 lte:小于或等于当前版本,包括本身 gt:大于当前版本 gte:大于或等于当前版本,包括本身 使用格式 // 如IE9以下(不包括IE9加 ...
随机推荐
- Jetty源码分析(一)
一.目的 1.了解jetty组成架构: 2.学习jetty启动过程: 3.学习请求访问过程: 4.学习jetty内各模块作用,学习各模块内部代码: 二.jetty版本 本文所学习的jetty版本为:9 ...
- Java 后台获取当前时间
Calendar c = Calendar.getInstance();//可以对每个时间域单独修改 int year = c.get(Calendar.YEAR); int month = c.ge ...
- PHP学习第一天笔记——php的基本语法
1.php嵌入到html中的方式 (1) <?php.....?> 标准风格(推荐) (2)<script language="php">......< ...
- myrocks记录格式分析
概况 rocksdb作为KV存储引擎,那么myrocks记录最终会以kv的形式存储在rocksdb中.MySQL中的表一般由若干索引组成, 在innodb存储引擎中,每个索引对应一颗B树,而在rock ...
- asp.net identity 2.2.0 中角色启用和基本使用(二)
建立模型 第一步:在Models文件夹上点右键 >添加>类 类的名称自定,我用AdminViewModels命名的 因为是讲基本使用,我这里不做任何扩展. 第二步:添加如下命名空间 ...
- C#中的线程二(Cotrol.BeginInvoke和Control.Invoke)
C#中的线程二(Cotrol.BeginInvoke和Control.Invoke) 原文地址:http://www.cnblogs.com/whssunboy/archive/2007/06/07/ ...
- 原创教程:《metasploit新手指南》介绍及下载
原创教程:<metasploit新手指南>介绍及下载 1.1 作者简介 这份教程并不是“玄魂工作室”原创,但是我还是要力推给大家.相比那些一连几年都在问“我怎么才能入门”的人而言,我们更欣 ...
- VS2012编译的Windows服务启动后立即停止的解决方案
ATL中的BUG,在没有COM的服务中,使用_ATL_NO_COM_SUPPORT. 并在服务中添加下面的代码 #if defined(_ATL_NO_COM_SUPPORT) HRESULT Pre ...
- 相识Highcharts,几分钟玩转Highcharts
Highcharts是一个功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 官网:http://www.hcharts.cn/ 我觉得对于刚接触一个东西的新手来说,有时候对一个东西真 ...
- 风筝的C++随时记
关于常量指针与指针常量 关于按位运算符(&.|.<<.>>) 关于常量指针和指针常量 两个概念经常混淆啊,这是在考中文四六级啊,所以我给这两个概念起个长一点的名字. ...