1. 程式人生 > >關於IE,360,火狐,谷歌中遇到的幾個相容性問題的總結

關於IE,360,火狐,谷歌中遇到的幾個相容性問題的總結

1  垂直居中問題

     在導航條中,IE中文字向上顯示,這是因為我們沒有設定行高而導致的不相容,解決方法line-height設定的值和height的一樣高,還有vertical-align:middle,問題就解決了。

2  圓角問題

   我們經常會在IE9一下的瀏覽器中看到一些網站的輪播圖下面的光圈顯示為正方形,其實這是因為border-radius這個元素只在IE9+,Firefox4+ ,chrome,safari5+以及opera中支援,要想解決這個問題只能通過js。

3  解決IE8的相容性

   <meta http-equiv="X-UA-Compatible" content="IE=edge" />

   X-UA-Compatible是針對IE8新加的一個設定,只有IE8能識別,而edge是模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內容,實際上破壞了“鎖定”模式。

   <meta http-equiv="X-UA-Compatible" content="IE=7" />

   無論頁面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的標準渲染模式。

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令確定如何呈現內容。標準模式指令以Windows Internet Explorer 7 標準模式顯示,而 Quirks 模式指令以 IE5 模式顯示。與 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。對於多數網站來說,它是首選的相容性模式。

4  BODY底部空白問題

    在IE和360中會出現body底部無限空白問題,有一個解決法案,就是對body設定height:auto;overflow:hidden; 但是又會牽扯出另外一個問題,未設定前火狐和谷歌中正常的頁面在設定後就會出現分類導航被隱藏的問題,於是這個方案無效。

    第二個解決方案,首頁面的js有書寫有誤的,導致 body底部無限空白,故檢查首頁js,最終通過改js就解決了這個問題。