直播搭建解決浏覽器相容性問題

直播搭建過程中對于浏覽器的相容性也在考慮的範圍之内，在前端開發遇到浏覽器相容性問題，産生這個問題的主要原因是不同浏覽器的核心不同，對網頁的解析結果會産生差異。想要解決浏覽器的相容性問題，可以從三方面考慮：html,css,js。

Html部分

1.調用CDN的html5shiv,html5shiv.js可以實作讓IE低版本浏覽器識别并支援html5标簽

2.img标簽在圖檔不存在的情況下，各浏覽器的解析不一緻。在chrome下顯示的是一張破損的圖檔；在fierfox下顯示的是alt文字；而在IE浏覽器中則顯示是破損的圖檔加文字

3.ul标簽内外邊距問題。Ul标簽在IE中有預設的外邊距，但在最新的IE版本以及其他浏覽器中有個預設的内邊距。解決這一問題的方法：同一設定ul的内外邊距為0

Css部分

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

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:0auto，無法使元素居中，解決方法：為其父容器設定text-align:center

7.被點選過後的超連結不再具有hover和active屬性，解決方法是按“lvha”的順序書寫css樣式

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的內插補點，在IE中會獲得目前年，但在firefox中則會獲得目前年與1900的內插補點

5.ajax的實作方式不同，也就是對XMLHttpRequest的不同，IE以下是activeXObject

6.IE中不能操作tr的innerHtml

7.獲得DOM節點的父節點、子節點的方式不同，其他浏覽器：parentNode、parentNode.childNodes；IE：parentElement,parentElenment.children