瀏覽器兼容性問題

問題：常常遇到的瀏覽器的兼容性的狀況、解決方法？
思路：首先明確項目要兼容哪些瀏覽器的最低版本，而後考慮到CSS樣式和JavaScript在這些瀏覽器的兼容性。

1、HTML 兼容性
  1.H5新標籤在低於IE9的瀏覽器中的識別
  html5shiv.min.js：解決ie9如下瀏覽器對html5新增標籤的不識別，並致使CSS不起做用的問題。
  respond.min.js: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其餘瀏覽器支持查詢。
  <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5s...;></script>
    <script src="http://cdn.bootcss.com/respon...;></script>
  <![endif]-->
  引入respond.min.js，但要在css的後面（越早引入越好，在ie下面看到頁面閃屏的機率就越低，由於最初css會先渲染出來，若是respond.js加載得很後面，這時從新根據media query解析出來的css會再改變一次頁面的佈局等，因此看起來有閃屏的現象）。

  2.不一樣瀏覽器的標籤默認的內/外補丁不一樣
  雖然這些年來隨着瀏覽器的迅速發展與規範的統一，瀏覽器特性碎片化的狀況有所改善，可是在不一樣的瀏覽器之間仍然存在着不少的行爲差別。而解決這種問題的最好的辦法就是使用某個CSS Reset來爲全部的元素設置統一的樣式，保證你能在相對統一干淨的樣式表的基礎上開始工做。目前流行的Reset庫有 normalize.css, minireset 以及 ress ，它們均可以修正不少已知的瀏覽器之間的差別性。而若是你不打算用某個外在的庫，那麼可使用以下的基本規則:
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  *號這樣一個通用符在編寫代碼的時候是快，但若是網站很大，CSS樣式表文件很大，這樣寫的話，他會把全部的標籤都初始化一遍，這樣就大大的增強了網站運行的負載，會使網站加載的時候須要很長一段時間。

2、CSS 兼容性
  1.IE的條件註釋hack：
  <!--[if IE 6]>此處內容只有IE6.0可見<![endif]-->
  <!--[if IE 7]>此處內容只有IE7.0可見<![endif]-->

  2.IE 屬性過濾器（較爲經常使用的hack方法）
  針對不一樣的 IE 瀏覽器，可使用不一樣的字符來對特定的版本的 IE 瀏覽器進行樣式控制。

  3.瀏覽器 CSS 兼容前綴
  使用特定的瀏覽器前綴是CSS開發中常見的工做之一，不一樣的瀏覽器、不一樣的屬性對於前綴的要求也不同，這就使得咱們沒法在編碼過程當中記住全部的前綴規則。而且在寫樣式代碼的時候還須要加上特定的瀏覽器前綴支持也是個麻煩活，幸好如今也是有不少工具能夠輔助咱們進行這樣的開發:

• Online tools: Autoprefixer
• Text editor plugins: Sublime Text, Atom
• Libraries: Autoprefixer (PostCSS)

  4.a 標籤的幾種 CSS 狀態的順序
  不少人在寫 a 標籤的樣式，會疑惑爲何寫的樣式沒有效果，或者點擊超連接後，hover、active 樣式沒有效果，其實只是寫的樣式被覆蓋了。
  正確順序:L-V-H-A : a:link, a:visited, a:hover, a:active {}
   ":link": a標籤還未被訪問的狀態；
   ":visited": a標籤已被訪問過的狀態；
   ":hover": 鼠標懸停在a標籤上的狀態；
   ":active": a標籤被鼠標按着時的狀態；

  5.IE6 雙倍邊距的問題
  在 ie6 中設置浮動，同時又設置 margin，會出現雙倍邊距的問題
  解決方法：display: inline;

  6.透明度的兼容CSS設置
  IE用 filter:alpha(opacity=60)，而其餘主流瀏覽器用 opacity:0.6;

3、JavaScript的兼容性
兼容性對象	通常瀏覽器	IE
綁定和刪除事件處理程序	addEventListener removeEventListener	attachEvent detachEvent
獲取事件的目標	event.target	event.srcElement
阻止事件默認行爲	event.returnValue	event.preventDefault
中止事件冒泡	stopPropagation	cancelBubble
建立XHR對象	XMLHttpRequest構造函數	activeXObject

參考文章：

• bootstrap的其餘CDN地址
• respondjs實現思路
• 20個編寫現代CSS代碼的建議
• 瀏覽器兼容性問題解決方案 · 總結