瀏覽器兼容性雜談

原文地址: 小昱博客 - 瀏覽器兼容性雜談 轉載請註明出處，謝謝！

---

html5shiv.js讓IE6-8瀏覽器支持HTML5新標籤

參考文章

GitHub官方地址

使用方法

<!--[if IE]>
  <script src="html5shiv.js"></script>
<![endif]-->

Respond.js讓IE6-8瀏覽器支持媒體查詢

參考文章

Respond.js讓IE6-8支持CSS3 Media Query

GitHub官方地址

使用方法

1.在css中正經常使用 min/max-width media queries

@media screen and (min-width: 480px){
  ...styles for 480px and up go here
}

2.引入respond.min.js，但要在css的後面（越早引入越好，在ie下面看到頁面閃屏的機率就越低，由於最初css會先渲染出來，若是respond.js加載得很後面，這時從新根據media query解析出來的css會再改變一次頁面的佈局等，因此看起來有閃屏的現象）

<!--[if IE]>
  <script src="respond.js"></script>
<![endif]-->

實現思路

1.把head中全部 的css路徑取出來放入數組

2.而後遍歷數組一個個發ajax請求

3.ajax回調後僅分析response中的media query的min-width和max-width語法，分析出viewport變化區間對應相應的css塊

4.頁面初始化時和window.resize時，根據當前viewport使用相應的css塊。

總結

優勢：壓縮後僅1k,不跨域時性能ok，只需引入respond.js通用易用

缺點：僅支持media query的min-width和max-width（用於響應式夠用）；支持跨域，雖然配置有點麻煩，實現跨域代價高並且有閃屏體驗欠佳。

IE6~IE8中使用css3的選擇器

參考文檔

使用Selectivizr讓IE6~8支持CSS3

官方網站

使用方法

Selectivizr的使用很是的簡單，可是並不能直接使用，在使用前須要先加載下列框架中的任何一個：JQuery、dojo、prototype、Yahoo YUI、DOMAssistant、mootools、NVMatcher。須要注意的是Selectivizr對各個框架的支持程度不一，具體可查看官方網站。 而後在頁面裏引用Selectivizr便可。

<script type="text/javascript" src="[JS library]"></script>
<!--[if lt IE 9]>
    <script type="text/javascript" src="selectivizr-min.js"></script>
< ![endif]-->

注意事項

1. Selectivizr會自動檢測最好的JS框架，若是你當前頁面中正在使用如JQuery框架，可是它對Selectivizr的支持並不太好，你只須要在頁面中再調用另外一個（如Mootools）便可。
2. CSS樣式必須使用 標籤引入，還可使用@import，但不能在頁面裏使用