瀏覽器兼容性 - iriliguo－IT工程師數位筆記本

文章出處

今天寫CSS 3D Transforms發現ie10以下都不支持，遂總結了下兼容性這個問題，那么最好的方法是什么吶，

當然是升級到最新瀏覽器辣........哈哈哈.......還在用老版本什么的太讓人心塞~\(≧▽≦)/~啦啦啦

我們先看一下lt，lte，gt，gte分別表示什么：

lt：小于當前版本

lte：小于或等于當前版本，包括本身

gt：大于當前版本

gte：大于或等于當前版本，包括本身

在<body>里面加入下面這個啦，提醒用戶升級瀏覽器喲：

<!--[if lt IE 10]>
<div class="alert alert-danger" style="margin-bottom: 0">您正在使用 <strong>過時的</strong>
    瀏覽器. 是時候 <a target="_blank"
                                          href="http://browsehappy.com/">更換一個更好的瀏覽器</a>
    來提升用戶體驗.</div>
<![endif]-->

或者：

<!--[if lt IE 10]>

<script type="text/javascript">

    window.location.href=" http://browsehappy.com/";
</script>
<![endif]-->

如果要兼容呢，依舊條件注釋法：

1.<meta http-equiv="x-ua-compatible" content="ie=7" /> 在head里面加入這個, ie8瀏覽器就和ie7一模一樣了。

2.htmlshiv.js/selectivizr.js

Remy的 HTML5shiv通過JavaScript 來創建HTML5元素(如 main, header, footer等)。在某種程度上通過JavaScript 創建的元素是 styleable(可樣式)的。我們可以花很多時間來思考其運行原理，但誰會在乎呢?這種策略在所有產品網站上仍然是必須使用的。 代碼如下:
<!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7/html5shiv.js"></script><![endif]-->

Selectivizr.js 是一個不可思議的資源，用于填充不支持的CSS選擇器和屬性,包括重要的 last-child。在最近的重設計中，我嵌入了 selectivizr，并在更老的 IE 瀏覽器上也不會錯過任何細節。下面是我的實現代碼:
代碼如下:
<!--[if lte IE 8]><script src="http://cdn.bootcss.com/selectivizr/1.0.2/selectivizr.js"></script><![endif]-->

3.根據不同的瀏覽器版本，載入不同的css

<!--[if IE 8]> 
<link rel="stylesheet" type="text/css" href="ie8.cdd"> 
<![endif]--> 
<!--[if IE 7]> 
<link rel="stylesheet" type="text/css" href="ie7.cdd"> 
<![endif]--> 
<!--[if IE 6]> 
<link rel="stylesheet" type="text/css" href="ie6.cdd"> 
<![endif]-->

4.下面這個是比較土的方法辣

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

上面的方法是作用于css，來寫一些針對IE各版本的樣式差異。先判斷用戶用的哪個IE版本，然后在標簽上加上該版本的class，這樣可以方便hack。 
然后我們在css文件中就可以這樣寫：

.ie6 xxx {};
.ie7 xxx {};

注意：<!--[if IE]>只有IE6,7,8,9瀏覽器顯示(IE10標準模式不支持)<![endif]-->

5.IE9以下的瀏覽器不支持HTML5標簽，所以需要導入一個html5.js補丁，原理是通過JS來生成HTML5新標簽對象。

本著移動優先的原則，現在寫CSS都會用media query（響應式設計），IE8以下的瀏覽器不支持media query，這會導致@media 聲明的CSS不能生效，因此要導入一個css3-mediaqueries.js補丁。

<!--[if lte IE 8]>     
        <script src="/js/html5.js"></script>
        <script src="/js/css3-mediaqueries.js"></script>
        <link href="/css/ie8.css" rel="stylesheet" type="text/css">
<![endif]-->

6.IE11不支持條件注釋，可以用正則表達式判斷，比如下面這段代碼是判斷全部IE版本var browser = navigator.appName;

var ie11 = !!navigator.userAgent.match(/Trident\/7\./);
        if (browser == 'Microsoft Internet Explorer' || ie11 == true) {
            //do something
        }

注意：

navigator.appName 可返回瀏覽器的名稱

Javascript的window.navigator.userAgent.match()方法用于判斷瀏覽器類型，

例如
window.navigator.userAgent.match(/MSIE 6/ig)
判斷瀏覽器是否是IE 6