2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

前段時(shí)間的一個(gè)項(xiàng)目，要做ie8及以上的兼容，那個(gè)做的我真的是蛋疼，菊花緊啊。。。。

當(dāng)時(shí)就想問(wèn)問(wèn)微軟ie的部門，你們到底想干蝦米，這不是要逼死前段工程師嗎。。。。

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

以下我總結(jié)簡(jiǎn)單總結(jié)了幾條：

不管你是不是做兼容，做為一個(gè)前端工程師，都要養(yǎng)成一個(gè)習(xí)慣，那就是用類（class）來(lái)控制樣式（css），用id來(lái)控制腳本（JavaScript），那這是為什么呢？ ?道理其實(shí)很簡(jiǎn)單，在ie8以下的瀏覽器中，對(duì)于以下

#first?#second{color：red； }

????????這種寫(xiě)法是找不到這個(gè)元素的，所以有時(shí)候你會(huì)發(fā)現(xiàn)在google瀏覽器里很和平的事情，到了ie中這個(gè)css就完全消失了。

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

????2.? ? 因?yàn)橐嫒輎e8，而ie8是不支持css3.0的，有可能你的第一反應(yīng)是，那就不用那些比較酷炫的效果嘍，然而如果你只是這么想，那就圖樣了。。。 ?在css2.0中，對(duì)于css那些比較好用的選擇器，也是不支持的，舉個(gè)最簡(jiǎn)單的例子哈，css2.0是支持：first-child這個(gè)選擇器的，而：last-child是不支持的，是不是很無(wú)語(yǔ)，反正我當(dāng)時(shí)看到文檔的時(shí)候是沒(méi)話說(shuō)了。。。。

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

????????這是w3c的標(biāo)準(zhǔn)寫(xiě)法：

margin:0;

????????ie6:

_margin:0;

????????ie7:

*margin:0;

????????ie8:

margin:0\9;

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

margin:0\9\0;

????4.我們都知道ie8是不支持css3.0屬性的，但是有的時(shí)候沒(méi)辦法，領(lǐng)導(dǎo)就是想在ie8下看到邊框圓角，那咋辦嘞，

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

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

????? 看到這里肯定有朋友會(huì)問(wèn)了，這個(gè)htc（下面我稱呼它為火腿腸）是干嘛用的嘞，其實(shí)很簡(jiǎn)單，因?yàn)閕e8的內(nèi)核是沒(méi)有css3.0的那種圓角算法的，所以需要提供一個(gè)腳本來(lái)供它計(jì)算，哎。。。。這坑爹的ie啊，5555555~

????5.那就會(huì)有朋友來(lái)問(wèn)了，萬(wàn)一領(lǐng)導(dǎo)要是想用哪個(gè)html5的屬性咋辦，ie8也是不兼容html5的呀。。。。

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

????????我們借用jQuery，將這個(gè)屬性強(qiáng)行的注入的input元素中，來(lái)看代碼：

(function?($)?{//動(dòng)態(tài)的在input中加入一個(gè)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.介紹了這么多細(xì)節(jié)上的兼容，那么接下來(lái)就介紹一下比較簡(jiǎn)單的框架兼容，在這里我么你是用了zui這個(gè)前端的ui框架，地址在這里 ??zui.sexy/#/? ，那么它的兼容方法我也順便提一下吧，我們要在css文件加載之后，馬上加載一下兩個(gè)文件，

<!--?h5標(biāo)簽兼容--> <script?src="/bower_components/zui/dist/lib/ieonly/html5shiv.js"?></script> <!--?響應(yīng)式布局兼容--> <script?src="/bower_components/zui/dist/lib/ieonly/respond.js"?></script>

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

好啦，以上就是我在做ie兼容的時(shí)候遇到的一些蛋碎的問(wèn)題，不管又沒(méi)用，還是希望能夠幫到需要的人，嘿嘿

轉(zhuǎn)載于:https://my.oschina.net/codingBingo/blog/632781

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。