如何應(yīng)對web開發(fā)中遇到的瀏覽器兼容問題

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

創(chuàng)新互聯(lián)公司公司2013年成立，先為贛榆等服務(wù)建站，贛榆等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為贛榆企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

正文：

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

解決思路：用一個(gè)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）這個(gè)引用一定要放在html文件里面，而且路徑也是相對于引用的html文件而言的，放在css文件里面不會(huì)有效果

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

開玩笑的，我確實(shí)去洗了個(gè)澡但是并沒有出現(xiàn)，所以代碼出現(xiàn)BUG什么的，求神拜佛到底是沒用?。〝偸郑?，從頭調(diào)了一遍，又去百度了一下，發(fā)現(xiàn)問題了，是因?yàn)閦-index的緣故，但只　　設(shè)置一個(gè)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ú)寫一個(gè)js文件獲取屏幕寬度，然后再分別添加對應(yīng)樣式

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

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

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

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

/*用于兼容ie8實(shí)現(xiàn)不同寬度窗口的響應(yīng)式布局*/
function getWidthHeight(){
var wWidth,wHeight;
//獲取窗口寬度
if(window.innerWidth){
wWidth = window.innerWidth;
}else if(document.body && document.body.clientWidth){
wWidth = document.body.clientWidth;
}
//獲取窗口高度
if(window.innerHeight){
wHeight = window.innerHeight;
}else if(document.body && document.body.clientHeight){
wHeight = document.body.clientHeight;
}
//通過深入Document內(nèi)部對body進(jìn)行檢測，獲取窗口大小
if(window.documentElement && window.documentElement.clientWidth && window.documentElement.clientHeight){
wWidth = window.documentElement.clientWidth;
wHeight = window.documentElement.clientHeight;
}
return {"wWidth":wWidth,"wHeight":wHeight};
}
$(document).ready(function(){
var wWidth = getWidthHeight().wWidth;
if(wWidth <= 900){
$("body").css("font-size","5px");
}else if(wWidth > 900 && wWidth < 1200){
$("body").css("font-size","8px");
}else if(wWidth > 1200){
$("body").css("font-size","10px");
}
});