瀏覽器相容性

前端開發遇到的瀏覽器相容性問題

  產生這個問題的主要原因是不同瀏覽器的核心不同，對網頁的解析結果就產生了差異。
  解決瀏覽器相容性問題，主要從三方面考慮：html, css, js.

html部分

1. 呼叫CDN的html5shiv。html5shiv.js可以實現讓IE低版本瀏覽器識別並支援html5標籤。
2. img標籤在圖片不存在的情況下，各瀏覽器的解析不一致。在chrome下顯示的是一張破損的圖片，在firefox下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字。
3. ul標籤內外邊距問題。ul標籤在IE6IE7中，有個預設的外邊距，但是在IE8以上及其他瀏覽器中有個預設的內邊距。解決方法：統一設定ul的內外邊距為0。

css部分

1. css的hack問題。主要針對IE的不同版本，不同版本的寫法不同：

<!--[if IE 6]>此處內容只有IE6.0可見<![endif]-->     
<!--[if IE 7]>此處內容只有IE7.0可見<![endif]-->
<!--[if gte IE 7]>目標IE版本大於或等於7<![endif]-->

2. IE6雙邊距問題。IE6在浮動後，又有橫向的margin，此時，該元素的外邊距是其值的2倍，解決辦法：display:inline。
3. IE6下圖片的下方有空隙，解決方法：給img設定display:block。
4. IE6下兩個float之間會有個3px的bug，解決辦法：給右邊的元素也設定float:left。
5. IE6下沒有min-width的概念，其預設的width就是min-width。
6. IE6下使用margin:0 auto，無法使元素居中，解決辦法：為其父容器設定text-align:center。
7. 被點選過後的超連結不再具有hover和active屬性。解決辦法是按“lvha”的順序書寫css樣式：
  “:link”: a標籤還未被訪問的狀態；
  “:visited”: a標籤已被訪問過的狀態；
  “:hover”: 滑鼠懸停在a標籤上的狀態；
  “:active”: a標籤被滑鼠按著時的狀態。
8. 在使用絕對定位或者相對定位後，IE中設定z-index失效，原因是因為其元素依賴於父元素的z-index，但是父元素預設為0， 子高父低，所以不會改變顯示的順序。
9. IE6下無法設定1px的行高，原因是由其預設行高引起的，解決辦法：為其設定overflow:hidden;或者line-height:1px。
10. 不同瀏覽器的標籤預設的外補丁和內補丁不同，解決方案：css裡 *{margin:0;padding:0;}

js部分

1. 標準的事件繫結方法函式為addEventListener，但IE下是attachEvent。
2. 事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，但是最後的結果是將IE的標準定為標準。
3. 我們常說的事件處理時的event屬性，在標準瀏覽器其是傳入的，IE下由window.event獲取的。並且獲取目標元素的方法也不同，標準瀏覽器是event.target，而IE下是event.srcElement。
4. 在低版本的IE中獲取的日期處理函式的值不是與1900的差值，但是在高版本的IE中和標準瀏覽器保持了一致，獲取的值是與1900的差值。比如：var year= new Date().getYear()，在IE中會獲得當前年，但是在firefox中則會獲得當前年與1900的差值。
5. ajax的實現方式不同，這個我所理解的是獲取XMLHttpRequest的不同，IE下是activeXObject。
6. IE中不能操作tr的innerHtml。
7. 獲得DOM節點的父節點、子節點的方式不同，其他瀏覽器：parentNode，parentNode.childNodes，IE：parentElement，parentElement.children。