前言：

上周天的時(shí)候有個學(xué)長找我?guī)兔ψ鋈龔堩撁妫驗(yàn)闆]有數(shù)據(jù)交換之類的，只是單純的前端頁面，想著好久沒做東西， 看書都看煩了，所以就接了也當(dāng)是練手。之前因?yàn)闆]有系統(tǒng)的看書，所以其實(shí)很多問題都考慮的不全面，屬于知其然不知其所以然的狀態(tài)，雖然現(xiàn)在也還有很多要學(xué)的東西，但是知道自己的不足總比不知道強(qiáng)吧？而且這也算是一種進(jìn)步？總之，遇到各種問題，然后我發(fā)現(xiàn)問題主要分為兩類，一：我自己知識點(diǎn)不夠所以不知道怎么解決的，這種問題大多求問度娘或者問大神是可以搞定的；二：屬于確實(shí)是現(xiàn)階段技術(shù)存在漏洞的，不論是還沒能實(shí)現(xiàn)的、實(shí)現(xiàn)了但存在歧義或沖突的皆在此列。而就我這次做的頁面我遇到最大的問題就是瀏覽器兼容性的問題，有了解決方法的就在此和大家分享，希望能夠拋磚引玉，我也能學(xué)到更多的知識，謝謝。

正文：

1.遇到問題：當(dāng)前瀏覽器為ie7及以下版本

解決思路：用一個div覆蓋，讓用戶不能看到正常頁面呈現(xiàn)的內(nèi)容

實(shí)現(xiàn)方法：將正常是顯示內(nèi)容的div的display屬性設(shè)置為none，將覆蓋div的display屬性設(shè)置為block（PS：在其中可以加入瀏覽器下載鏈接，讓用戶盡快正常瀏覽頁面）

2.遇到問題：ie8中不能實(shí)現(xiàn)圓角，因?yàn)閕e8不能很好的支持css3

解決思路：下載PIE使得ie8支持css3中的圓角

實(shí)現(xiàn)方法：這里的實(shí)現(xiàn)方法就不細(xì)說了，下載然后“behavior: url(path/PIE.htc);”把路徑更改了就能夠訪問了，說一下需要注意的幾點(diǎn)問題：

（1）這個引用一定要放在html文件里面，而且路徑也是相對于引用的html文件而言的，放在css文件里面不會有效果

（2）如果發(fā)現(xiàn)引用成功之后，需要圓角的對象消失了，不要方，去洗個澡出來就好了，親測

開玩笑的，我確實(shí)去洗了個澡但是并沒有出現(xiàn)，所以代碼出現(xiàn)BUG什么的，求神拜佛到底是沒用啊（攤手），從頭調(diào)了一遍，又去百度了一下，發(fā)現(xiàn)問題了，是因?yàn)閦-index的緣故，但只　　設(shè)置一個z-index沒有效果，哦~原來它的position屬性不能是static即默認(rèn)值，ok，設(shè)置position為relative就ok啦，完美的圓角在ie8就實(shí)現(xiàn)啦~（在此我真誠的感謝寫出PIE的工程師　　們確實(shí)是因?yàn)槟銈兊呐Σ抛屛胰绱溯p松的實(shí)現(xiàn)了我想要的效果，康桑阿米達(dá)~）

3.遇到問題：依然是ie8，不能支持css3中的@media screen and (....)實(shí)現(xiàn)響應(yīng)式布局

解決思路：沒辦法，誰讓它是磨人的小妖精呢？（聳肩）單獨(dú)寫一個js文件獲取屏幕寬度，然后再分別添加對應(yīng)樣式

實(shí)現(xiàn)方法：“<!--[if lt ie9]><script type='text/javascript' src='path'></script> <![endif]-->”放在html中，然后在引入的js文件中實(shí)現(xiàn)就ok了。說一個期間遇到的痛苦的事情給大家樂一樂，我搞了半天，發(fā)現(xiàn)莫名其妙就是不行，去網(wǎng)上找了各個大神的代碼來，一一對照就是不行！怎么能不行呢，這是多么傷自尊的事情啊。然后發(fā)現(xiàn)，居然是因?yàn)樵?quot;ie9"和“>”之間多了一個空

（手動再見）。不過調(diào)出BUG之后那種成就感還是有的哈，就是知道是因?yàn)檫@個原因，有種“讓我想先殺自己100遍好了”的感覺。

js代碼貼在下面，其實(shí)原理很簡單。主要是其中有innerWidth和clientWidth的一些小區(qū)別，如果有疑問的話網(wǎng)上有很多大神的詳細(xì)解析可以搜來看看。

4.遇到問題：在ie11之前的版本，如果<img>在<a>標(biāo)簽中，則會出現(xiàn)奇怪的藍(lán)色邊框

實(shí)現(xiàn)方法：給<img>加一個“border:0;”絕對立竿見影

5.遇到問題：因?yàn)槭乔芭_首頁，所以寫了圖片滾動，ie10以下圖片莫名出現(xiàn)多余空隙

實(shí)現(xiàn)方法：給<img>加一句“display:block;”效果卓越

6.遇到問題：豎向顯示的文字用了“writing-mode:tb-rl;”但是在去朋友的電腦上調(diào)時(shí)發(fā)現(xiàn)居然在我心愛的FF上沒效果，不可能啊？？？然后發(fā)現(xiàn)是因?yàn)镕F4及以下版本沒有實(shí)現(xiàn)這個屬性，這個屬性最初是由ie想出來的（老實(shí)說，我當(dāng)時(shí)有點(diǎn)意外呢，畢竟ie在我心中是個孤僻的天才，屬于自己搞點(diǎn)小發(fā)明但是都屬于破壞向的，所以居然這么好用的屬性是被ie想出來的，而且FF居然要到了后來才實(shí)現(xiàn)，不得不說對于我是挺意外的）

解決思路：沒法，有問題就得想辦法解決，那就只能一句一句的用ul li嵌套，然后向右浮動，設(shè)置定寬來實(shí)現(xiàn)了（老實(shí)說在用過writing-mode后這個方法很傻而且效果不好）

實(shí)現(xiàn)方法：思路說了，那就直接上代碼。

以上就是我調(diào)兼容性遇到的問題啦，以下就是我之前說的那兩類問題，即我能力有限所以遇到的問題，還有就是現(xiàn)存的沒有辦法解決的問題

一：這個問題歸根結(jié)底就兩字：浮動?。ū仨毴涡越o它加粗加底線）不論是莫名其妙的這個div就跑到后面去啦；哎，你這個img跟著上面的導(dǎo)航的布局跑什么跑；喂喂，這個p標(biāo)簽怎么這么不負(fù)責(zé)任呢？和你一起的img都乖乖在下面呆著，你跑到上面這個div里面的p標(biāo)簽旁邊是要搞什么，搞基嘛？好吧，我承認(rèn)這個鍋說到底還是要自己背，因?yàn)楦哟_實(shí)很強(qiáng)大，但是用不好會真的有很奇怪的結(jié)果出現(xiàn)。所以啊，好好看書吧，在這里罵這些標(biāo)簽或者瀏覽器感覺它們也挺無辜的。

二：（1）因?yàn)橐惒郊虞d文件進(jìn)來，所以用到了JQuery的load方法，但是在谷歌瀏覽器上面是禁止的，沒有辦法調(diào)但是換到服務(wù)器上就好了，同樣的還有360也是這樣的

（2）谷歌中不能設(shè)置font-size小于12px，這是谷歌的BUG存在挺久的了，雖然不知道為何要一直留著，大概覺得這樣很酷？在網(wǎng)上搜到一個解決辦法“-webkit-text-adjust:none;”但是我測試沒　　有成功，谷歌直接禁了，說是沒有這個東西。

后話：

最后，有一點(diǎn)我個人的小感受，實(shí)踐確實(shí)會學(xué)到很多知識，而且沒有看書那么枯燥，但是這些知識會很散漫，所以看書這樣系統(tǒng)的學(xué)習(xí)依然是必須的，所以之后會努力結(jié)合好兩者，希望能有更多的進(jìn)步吧。還有還有對于ie的一點(diǎn)小小感悟：因?yàn)閕e很個性，瀏覽器實(shí)現(xiàn)里面特別愛特立獨(dú)行，所以我之前特別討厭ie，覺得大概是一群仗著自己很6就不把別人放眼里的天才家伙們，但是現(xiàn)在發(fā)現(xiàn)ie其實(shí)確實(shí)就我個人而言是背鍋小天使，它本身對于前端的實(shí)現(xiàn)很有想法，很多細(xì)致的地方做得很棒，而且對于前端技術(shù)的發(fā)展也很有前瞻性，所以之前之所以會不住的罵它也是因?yàn)樽约旱臒o知吧，畢竟作為天才總是有一些不同于常人的脾氣才能彰顯它作為天才這個事實(shí)吧。我不會再毫無理由的罵它了，不過還是真心希望它能夠在未來的某天，不要如此折磨我們可愛的前端程序猿了:-)

以上這篇關(guān)于遇到的瀏覽器兼容問題及應(yīng)對方法(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論