碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2016-05-18 11:11   3333    HTML

瀏覽器兼容處理(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

 

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML5瀏覽器支持及兼容性處理 用條件注釋判斷瀏覽器版本解決頁面兼容問題 如何處理使用js兼容所有瀏覽器的問題 html兼容ie瀏覽器的寫法 處理瀏覽器兼容 各個瀏覽器的標識 hack 瀏覽器兼容——jquery的html()不兼容IE js之瀏覽器兼容性 js兼容各個瀏覽器的復制功能 JS 代碼，兼容各大瀏覽器 js獲取referer,兼容各種瀏覽器
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM