隨著技術日新月異的發展,我以為已經可以完全甩掉ie瀏覽器,馳騁在新技術的海洋裡。卻不想,ie相容問題如影隨行。
當然,嘗試解決ie瀏覽器相容問題,並不代表我會去擁護它。我想做的只是為解決瀏覽器相容提供一些個人思路,畢竟,很多公司還會有此類的需求。
一、明確你要相容的瀏覽器範圍
很簡單,當你明確了要相容的瀏覽器範圍,不需要相容的瀏覽器就可以一併處理了。例如:直接彈出提示,指引使用者**chrome,firefox等現代瀏覽器。簡單粗暴,但卻有效。
那麼我們如何去過濾呢,這時候,條件注釋就可以上場了,用法如下:
符號解釋:
嗯,不錯,一大半的負擔被卸掉了。
因為我足夠幸運,只需要解決ie9瀏覽器的相容問題。所以,可以這麼寫:
js中設定了cookie和url重定向,引導使用者去**chrome瀏覽器,這裡就不細說了。
當然,相容問題哪有這麼容易就搞定的,我們繼續往下走~
二、檢查頁面中的偽類和偽元素
這裡還是以ie9示例,下面列出ie9對偽類的支援情況:
對於不支援的情況,我們只能換方案,舉個簡單????:清除浮動的方式有很多,為了**優雅,恰巧我們選擇了用after偽元素的方式,如下:
很好,ie9說:「不可以!」。好,那就換乙個大家都比較容易接受的方案,如下:
不外乎就是在頁面加個空容器,雖然不優雅,但足夠通用。
說了這麼多,想表達的意思無非就是:
三、排查css3相容問題
如果你對css3瀏覽器支援情況不是很了解,點選這裡檢測
四、使用css hack
到這裡,瀏覽器危險屬性已經都排查完了。我們開始區域性細節調整,這裡就需要用到css hack了。ie6 hack:
ie7 hack:
ie8 hack:
ie6,7,8共有hack:
ie6,7共有hack:
ie8 hack:
ie9 hack:
根據實際的應用場景,選擇不同的hack,用css覆寫就可以了。再舉乙個簡單的栗子:
想了解更詳細的css hack,請走這邊:傳送門
五、js判斷瀏覽器型別
css hack也用上了,但是某種情況下,hack也並不完美。所以,我們再加一道保險,用js來做區域性控制。
方式一:
方式二:
方式三:
方式四:
以上js**基本覆蓋了大部分主流瀏覽器,到這裡90%以上的瀏覽器相容問題應該都可以搞定了吧。
六、我的問題清單
大概總結一下,以下是已知ie9的相容問題:1.swiper3.0以上,不支援ie9;解決方案:換swiper2.*版本,或者換外掛程式。
2.after等偽元素不支援;解決方案:用div或者其他元素等效替代。
3.ie9支援的屬性background-size怎麼也會失效;解決方案:如下
4.flex布局失效,如何解決;解決方案:用float或者flex.css庫去相容。
5.display: none\9\0失效,需要改成display: none\9,好奇怪;解決方案:好奇怪,不按套路?
6.ie9中特定條件下絕對定位失效?相對定位內的絕對定位元素內部的相對定位元素,ie9下會巢狀異常。解決方案:簡化巢狀結構。
7.keyframes ,ie9不相容;解決方案:降級動畫。
8.ie9中img只給width或者height會塌陷;解決方案:嚴格按照比例,來計算顯示比例,兩個屬性都要設值,否則顯示異常。
七、小結
瀏覽器相容問題
我經常看到一些人提問說網頁錯位,和在火狐裡面看上去網頁是好的,在ie在錯位了.在web 下html css裡全看一些關於這些問題.還有有ul li什麼調整不好的.等等 全可以用css hack 解決的.解決方法 用positon relative 然後 top 0px left 0px 上面的top...
瀏覽器相容問題
給近兩天的工作乙個總結,給這週劃上句號。工作中遇到了在google顯示的很好的介面,在ie顯示的不是很好,但還能看,僅僅是顏色和和位置錯位,在360瀏覽器下看就是真的錯誤太大了,不顯示,樣式也亂了,於是走上解決瀏覽器相容之路。思路1 對應每個瀏覽器寫個css,判斷之,工作量太大,放棄。思路2 針對每...
瀏覽器相容問題
所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同 段 有不同的解析,造成 顯 效果不統 的情況。在 多 數情況下,我們的需求是,論 戶 什麼瀏覽器來檢視我們的 站或者登陸我們的系統,都應該是統 的顯 效果。所 以瀏覽器的相容性問題是前端開發 員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...