星空网 > 软件开发 > Java

浏览器兼容处理(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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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.);  alert(typeof xhr.open)  }

    [解决]在浏览器环境下测试任何对象的某个特性是否存在使用下面这个函数

function isHostMethod(object,property){  var t = typeof object[property];  return t == "function" || (!!(t == "object" && object[property])) || t== "unknown";}  

 

  [1]IE8-(document.createElement)

  IE8-的宿主对象是通过COM而非JScript实现的。因此,document.createElement()函数确实是一个COM对象,所以typeof才会返回"Object"

  if(typeof document.createElement == "Object"){    alert(1)  }

 

  [2]IE10-(document.all)

  if(document.all){    alert(1)  }

 

  [3]IE10-(activeXObject)

  if(window.ActiveXObject){    alert(1)  }

 

  [4]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识别)

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊法国本土号优势你还不知道?看这一篇就够了:https://www.kjdsnews.com/a/1699376.html
亚马逊旺季站外流量如何拿捏?:https://www.kjdsnews.com/a/1699377.html
什么是原生广告以及它为何如此强大?:https://www.kjdsnews.com/a/1699378.html
网红营销卧底式竞调!高效洞悉竞对网红营销增长逻辑!:https://www.kjdsnews.com/a/1699379.html
2024 年您应该优先考虑的 5 个免费营销渠道 | ins/Facebook如何快速增粉:https://www.kjdsnews.com/a/1699380.html
从小作坊到滑雪用具头牌,Atomic做对了什么?:https://www.kjdsnews.com/a/1699381.html
2024.03.29亚马逊选品推荐(仅供参考):宠物饮水机滤芯片:https://www.kjdsnews.com/a/1836532.html
想要搞钱,就去做离搞钱最近的事:https://www.kjdsnews.com/a/1836533.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流