瀏覽器相容處理(HTML條件註釋、CSSHack和JS識別)
阿新 • • 發佈：2019-02-12
前面的話
本文中所有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
[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
[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
[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]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