隨著技術日新月異的發展，我以為已經可以完全甩掉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 針對每...
瀏覽器相容問題
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同 段 有不同的解析，造成 顯 效果不統 的情況。在 多 數情況下，我們的需求是，論 戶 什麼瀏覽器來檢視我們的 站或者登陸我們的系統，都應該是統 的顯 效果。所 以瀏覽器的相容性問題是前端開發 員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前，我...