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

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

 

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

 

 
posted @ 2016-05-18 11:11  墨韵明空  阅读(3766)  评论(0)  编辑  收藏  举报