如何應(yīng)對(duì)web開(kāi)發(fā)中遇到的瀏覽器兼容問(wèn)題

如何應(yīng)對(duì)web開(kāi)發(fā)中遇到的瀏覽器兼容問(wèn)題，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

正文：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

1. /*用于兼容ie8實(shí)現(xiàn)不同寬度窗口的響應(yīng)式布局*/  

2. function getWidthHeight(){   

3.     var wWidth,wHeight;   

4.     //獲取窗口寬度   

5.     if(window.innerWidth){   

6.         wWidth = window.innerWidth;   

7.   

8.     }else if(document.body && document.body.clientWidth){   

9.         wWidth = document.body.clientWidth;   

10.     }   

11.     //獲取窗口高度   

12.     if(window.innerHeight){   

13.         wHeight = window.innerHeight;   

14.     }else if(document.body && document.body.clientHeight){   

15.         wHeight = document.body.clientHeight;   

16.     }   

17.     //通過(guò)深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小   

18.     if(window.documentElement && window.documentElement.clientWidth && window.documentElement.clientHeight){   

19.         wWidth = window.documentElement.clientWidth;   

20.         wHeight = window.documentElement.clientHeight;   

21.     }   

22.   

23.     return {"wWidth":wWidth,"wHeight":wHeight};   

24. }   

25.   

26. $(document).ready(function(){   

27.     var wWidth = getWidthHeight().wWidth;   

28.     if(wWidth <= 900){   

29.         $("body").css("font-size","5px");   

30.     }else if(wWidth > 900 && wWidth < 1200){   

31.         $("body").css("font-size","8px");   

32.     }else if(wWidth > 1200){   

33.         $("body").css("font-size","10px");   

34.     }   

35. });  

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

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

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

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

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

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

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. //html部分   

2. //這里的<br>是為了讓標(biāo)點(diǎn)也能夠重起一行   

3. <ul>  

4.         <li>天氣真好<br>，天氣真好<br>。</li>  

5.         <li>天氣真好<br>。</li>  

6.         <li>天氣真好<br>，天氣真好<br>。</li>  

7.         <li>天氣真好<br>？天氣真好<br>；</li>  

8.         <li>天氣真好<br>？</li>  

9. </ul>  

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. //css部分   

2. ul{   

3.     width: 6em;//em是一個(gè)相對(duì)單位，比px更好，1em = font-size的大?。ㄈ绻麤](méi)有設(shè)置font-size則由繼承值決定）   

4.     overflow: hidden;//保證布局不會(huì)崩掉   

5.     list-style: none;//把默認(rèn)樣式去除   

6. }   

7. ul li{   

8.     float: right;//實(shí)現(xiàn)從右向左布局   

9.     width: 1em;//定寬保證只顯示一個(gè)字   

10.     margin-left: 0.2em;//保證每個(gè)li包含的內(nèi)容之間有一定的間隔，能夠看清楚   

11.     word-break:break-word;//告訴瀏覽器每個(gè)字后自動(dòng)換行   

12. }  

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

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

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

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

關(guān)于如何應(yīng)對(duì)web開(kāi)發(fā)中遇到的瀏覽器兼容問(wèn)題問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。