2019獨角獸企業重金招聘Python工程師標準>>>

前段時間的一個項目，要做ie8及以上的兼容，那個做的我真的是蛋疼，菊花緊啊。。。。

當時就想問問微軟ie的部門，你們到底想干蝦米，這不是要逼死前段工程師嗎。。。。

然后去Google上面找了好多關于兼容的文檔，然后歸類了一些，希望有跟我一樣碰到這種問題的朋友們能夠得到幫助，嘿嘿

以下我總結簡單總結了幾條：

不管你是不是做兼容，做為一個前端工程師，都要養成一個習慣，那就是用類（class）來控制樣式（css），用id來控制腳本（JavaScript），那這是為什么呢？ ?道理其實很簡單，在ie8以下的瀏覽器中，對于以下

#first?#second{color：red； }

????????這種寫法是找不到這個元素的，所以有時候你會發現在google瀏覽器里很和平的事情，到了ie中這個css就完全消失了。

????????還有控制樣式為什么要用id呢？因為id獲取到元素的步驟是最節約資源的，而且也是最直接的，所以各位新手小白前端們，?記住這個重要的步驟吧，肯定會少走很多彎路的

????2.? ? 因為要兼容ie8，而ie8是不支持css3.0的，有可能你的第一反應是，那就不用那些比較酷炫的效果嘍，然而如果你只是這么想，那就圖樣了。。。 ?在css2.0中，對于css那些比較好用的選擇器，也是不支持的，舉個最簡單的例子哈，css2.0是支持：first-child這個選擇器的，而：last-child是不支持的，是不是很無語，反正我當時看到文檔的時候是沒話說了。。。。

????3.接下來提供幾種ie瀏覽器的css hack 方法：

????????這是w3c的標準寫法：

margin:0;

????????ie6:

_margin:0;

????????ie7:

*margin:0;

????????ie8:

margin:0\9;

????????ie9/10:

margin:0\9\0;

????4.我們都知道ie8是不支持css3.0屬性的，但是有的時候沒辦法，領導就是想在ie8下看到邊框圓角，那咋辦嘞，

????這里提供一種方法

div{border-radius:5px;behavior:url(/pie.htc); }

????? 看到這里肯定有朋友會問了，這個htc（下面我稱呼它為火腿腸）是干嘛用的嘞，其實很簡單，因為ie8的內核是沒有css3.0的那種圓角算法的，所以需要提供一個腳本來供它計算，哎。。。。這坑爹的ie啊，5555555~

????5.那就會有朋友來問了，萬一領導要是想用哪個html5的屬性咋辦，ie8也是不兼容html5的呀。。。。

????? ? 對，我也遇到了同樣蛋碎的問題，具體咋辦類，在這里，我已html中的placeholder這個屬性為例，

????????我們借用jQuery，將這個屬性強行的注入的input元素中，來看代碼：

(function?($)?{//動態的在input中加入一個input屬性$.support.placeholder?=?('placeholder'?in?document.createElement('input')); })(jQuery);//fix?for?IE7?and?IE8 $(function?()?{if?(!$.support.placeholder)?{$("[placeholder]").focus(function?()?{if?($(this).val()?==?$(this).attr("placeholder"))?$(this).val("");}).blur(function?()?{if?($(this).val()?==?"")?$(this).val($(this).attr("placeholder"));}).blur().parents("form").submit(function?()?{$(this).find('[placeholder]').each(function()?{if?($(this).val()?==?$(this).attr("placeholder"))?{$(this).val("");}});});} });

????6.介紹了這么多細節上的兼容，那么接下來就介紹一下比較簡單的框架兼容，在這里我么你是用了zui這個前端的ui框架，地址在這里 ??zui.sexy/#/? ，那么它的兼容方法我也順便提一下吧，我們要在css文件加載之后，馬上加載一下兩個文件，

<!--?h5標簽兼容--> <script?src="/bower_components/zui/dist/lib/ieonly/html5shiv.js"?></script> <!--?響應式布局兼容--> <script?src="/bower_components/zui/dist/lib/ieonly/respond.js"?></script>

記住，在加載完css文件之后，越快加載這兩個文件越好。

好啦，以上就是我在做ie兼容的時候遇到的一些蛋碎的問題，不管又沒用，還是希望能夠幫到需要的人，嘿嘿

轉載于:https://my.oschina.net/codingBingo/blog/632781

總結

以上是生活随笔為你收集整理的让人“蛋碎”的ie兼容问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。