瀏覽器兼容處理(HTML條件註釋、CSSHack和JS識別)

時間  2019-11-12
標籤 瀏覽器 兼容 處理 html 條件 註釋 csshack 識別 欄目 瀏覽器 简体版
原文   原文鏈接

瀏覽器兼容處理(HTML條件註釋、CSSHack和JS識別)

 

HTML識別

條件註釋法(IE10+已經不支持條件註釋)html

　　【注意】兩個--和左中括號[之間不能有空格，不然無效web

　　[1]IE9-(<!--[if IE]><![endif]-->)chrome

複製代碼 
<!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]-->)ide

複製代碼 
<!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支持)post

　　[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;)url

複製代碼 
<!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;)spa

複製代碼 
<!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]IE九、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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程