1晌块、如何實現(xiàn)瀏覽器兼容pc端和移動端：
采用媒體查詢：首先先了解pc端窗口多大如下圖
然后采用媒體查詢來設(shè)置瀏覽器窗口程序如下
@media screen and (max-width: 980px) {
? ? .facet_sidebar {
? ? ? background-color:brown
? ? }
? }
? @media screen and? (min-width: 1024px) {
? ? .facet_sidebar {
? ? background-color: aqua
? ? }
? }
? /* @media screen and (max-width:1200px) and (min-width:600px){
? ? ? .facet_sidebar{background-color: blue}
? } */
</style>
<body>
? ? <div class="facet_sidebar" style="height: 100px;width: 100px;">
? ? </div>
如下圖
2.如何兼容ios和安卓
css兼容
1侵蒙、瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補丁和內(nèi)補丁不同問題癥狀：隨便寫幾個標(biāo)簽胰默，不加樣式控制的情況下，各自的margin 和padding差異較大寓免。
碰到頻率：100%
解決方案：CSS里*{margin：0垢袱；padding：0；}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題潮售，幾乎所有的CSS文件開頭都會用通配符*來設(shè)置各個標(biāo)簽的內(nèi)外補丁是0。
2锅风、瀏覽器兼容問題二：塊屬性標(biāo)簽float后酥诽，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問題癥狀：隨便寫幾個標(biāo)簽皱埠，不加樣式控制的情況下盆均，各自的margin 和padding差異較大。
碰到頻率：100%
解決方案：CSS里*{margin:O漱逸；padding：0}
備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題泪姨，幾乎所有的CSS文件開頭都會用通配符*來設(shè)置各個標(biāo)簽的內(nèi)外補丁是0。
3饰抒、瀏覽器兼容問題三：設(shè)置較小高度標(biāo)簽（一般小于10px）肮砾，在IE6，IE7袋坑，邀游中高度超出自己設(shè)置高度
問題癥狀：IE6仗处、7和邀游里這個標(biāo)簽的高度不受控制，超出自己設(shè)置的高度碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden；或者設(shè)置行高ine-height小于你設(shè)置的高度婆誓。
備注：這種情況一般出現(xiàn)在我們設(shè)置小圓角背景的標(biāo)簽里吃环。出現(xiàn)這個問題的原因是IE8之前的瀏覽器都會給標(biāo)簽一個最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的洋幻，這個標(biāo)簽的高度還是會達(dá)到默認(rèn)的行高郁轻。
4、瀏覽器兼容問題四：行內(nèi)屬性標(biāo)簽文留，設(shè)置display:block后采用float布局好唯，又有橫行的m argin的情況，IE6間距bug問題癥狀：IE6里的間距比超過設(shè)置的間距
碰到幾率：20%
解決方案：在display:block燥翅；后面加入display:inline骑篙；display:table；備注：行內(nèi)屬性標(biāo)簽森书，為了設(shè)置寬高靶端，我們需要設(shè)置display:block；（除了input標(biāo)簽比較特殊）凛膏。在用float布局并有橫向的margin后躲查，在IE6下，他就具有了塊屬性float后的橫向margin的bug译柏。不過因為它本身就是行內(nèi)屬性標(biāo)簽镣煮，所以我們再加上display:inline的話，它的高寬就不可設(shè)了鄙麦。這時候我們還需要在display:inline后面加入display:talbe典唇。
5、瀏覽器兼容問題五：圖片默認(rèn)有間距
問題癥狀：幾個img標(biāo)簽放在一起的時候胯府，有些瀏覽器會有默認(rèn)的間距介衔，加了問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img布局
備注：因為img標(biāo)簽是行內(nèi)屬性標(biāo)簽骂因，所以只要不超出容器寬度炎咖，img標(biāo)簽都會排在一行里，但是部分瀏覽器的img標(biāo)簽之間會有個間距寒波。去掉這個間距使用float是正道乘盼。
（我的一個學(xué)生使用負(fù)margin，雖然能解決俄烁，但負(fù)margin本身就是容易引起瀏覽器兼容問題的用法绸栅，所以我禁止他們使用）
5、瀏覽器兼容問題六：標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因為min-height本身就是一個不兼容的CSS屬性页屠，所以設(shè)置min-height時不能很好的被各個瀏覽器兼容
碰到幾率：5%
解決方案：如果我們要設(shè)置一個標(biāo)簽的最小高度200px粹胯，需要進(jìn)行的設(shè)置為：{min-hei ght：200px蓖柔；height:auto limportant；height：200px风纠；overflow:visible}
備注：在B/S系統(tǒng)前端開時况鸣，有很多情況下我們又這種需求。當(dāng)內(nèi)容小于一個值（如300px）時竹观。容器的高度為300px镐捧；當(dāng)內(nèi)容高度大于這個值時，容器高度被撐高栈幸，而不是出現(xiàn)滾動條。這時候我們就會面臨這個兼容性問題帮辟。
6速址、瀏覽器兼容問題七：透明度的兼容CSS設(shè)置
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當(dāng)然熟練到一定的程度就沒這么麻煩了由驹。建議經(jīng)常會碰到兼容性問題的新手使用芍锚。很多兼容性問題都是因為瀏覽器對標(biāo)簽的默認(rèn)屬性解析不同造成的，只要我們稍加設(shè)置都能輕松地解決這些兼容問題蔓榄。如果我們熟悉標(biāo)簽的默認(rèn)屬性的話并炮，就能很好的理解為什么會出現(xiàn)兼容問題以及怎么去解決這些兼容問題。
/*CSS hack*/
我很少使用hacker的甥郑，可能是個人習(xí)慣吧逃魄，我不喜歡寫的代碼IE不兼容，然后用hack來解決澜搅。不過hacker還是非常好用的伍俘。使用hacker我可以把瀏覽器分為3類：IE6；IE7和邀游勉躺；其他（IE8 chrome ff safari opera等）
·IE6認(rèn)識的hacker是下劃線和星號*
·IE7遨游認(rèn)識的hacker是星號*
比如這樣一個CSS設(shè)置：
height：300px癌瘾；*height：200px；height：100px饵溅；IE6瀏覽器在讀到height：300px的時候會認(rèn)為高時300px妨退；繼續(xù)往下讀，他也認(rèn)識*heih gt蜕企，所以當(dāng)IE6讀到*height：200px的時候會覆蓋掉前一條的相沖突設(shè)置咬荷，認(rèn)為高度是200px。繼續(xù)往下讀轻掩，IE6還認(rèn)識height萍丐，所以他又會覆蓋掉200px高的設(shè)置，把高度設(shè)置為100px放典；IE7和遨游也是一樣的從高度300px的設(shè)置往下讀逝变。當(dāng)它們讀到*height200px的時候就停下了基茵，因為它們不認(rèn)識height。所以它們會把高度解析為200px壳影，剩下的瀏覽器只認(rèn)識第一個height：300px拱层；所以他們會把高度解析為300px。因為優(yōu)先級相同且想沖突的屬性設(shè)置后一個會覆蓋掉前一個宴咧，所以書寫的次序是很重要的根灯。
js兼容
JS中出現(xiàn)的兼容性問題的總結(jié)
1.關(guān)于獲取行外樣式 currentStyle 和 getComputedStyle 出現(xiàn)的兼容性問題
我們都知道js通過style不可以獲取行外樣式，當(dāng)我們需要獲取行外樣式時:
我們一般通過這兩個方法獲取行外樣式：
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
兼容兩個瀏覽器的寫法:
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}
*注:在解決很多兼容性寫法時,都是用if..else..
封裝一個獲取行外樣式的函數(shù):(兼容所有瀏覽器,包括低版本IE6,7)
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
?? ?調(diào)用：getStyle(oDiv,'width');
2.關(guān)于用“索引”獲取字符串每一項出現(xiàn)的兼容性問題:
對于字符串也有類似于 數(shù)組 這樣的通過 下標(biāo)索引 獲取每一項的值,
var str="abcde";
aletr(str[1]);
但是低版本的瀏覽器IE6,7不兼容
兼容方法:str.charAt(i)?? ?//全部瀏覽器都兼容
var str="abcde";
for(var i=0;i
alert(str.charAt(i));?? //放回字符串中的每一項
}
3.關(guān)于DOM中 childNodes 獲取子節(jié)點出現(xiàn)的兼容性問題
childNodes:獲取子節(jié)點,
--IE6-8:獲取的是元素節(jié)點,正常
--高版本瀏覽器:但是會包含文本節(jié)點和元素節(jié)點(不正常)
解決方法: 使用nodeType:節(jié)點的類型掺栅，并作出判斷
--nodeType=3-->文本節(jié)點
--nodeTyPE=1-->元素節(jié)點
例: 獲取ul里所有的子節(jié)點烙肺，讓所有的子節(jié)點背景色變成紅色
獲取元素子節(jié)點兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
注：上面childNodes為我們帶來的困擾完全可以有children屬性來代替。
children屬性:只獲取元素節(jié)點,不獲取文本節(jié)點,兼容所有的瀏覽器氧卧，
比上面的好用所以我們一般獲取子節(jié)點時,最好用children屬性桃笙。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";
4.關(guān)于使用 firstChild,lastChild 等，獲取第一個/最后一個元素節(jié)點時產(chǎn)生的問題
--IE6-8下: firstChild,lastChild,nextSibling,previousSibling,獲取第一個元素節(jié)點
(高版本瀏覽器IE9+,FF,Chrome不兼容,其獲取的空白文本節(jié)點)
--高版本瀏覽器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本瀏覽器IE6-8不兼容)
--兼容寫法: 找到ul的第一個元素節(jié)點,并將其背景色變成紅色
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//高版本瀏覽器
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}
5.關(guān)于使用 event對象沙绝，出現(xiàn)的兼容性問題
如: 獲取鼠標(biāo)位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 傳參ev--> ev.clientX;ev.clientY
獲取event對象兼容性寫法: var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}
6.關(guān)于為一個元素綁定兩個相同事件：attachEvent/attachEventLister 出現(xiàn)的兼容問題
事件綁定:(不兼容需要兩個結(jié)合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
多事件綁定封裝成一個兼容函數(shù):
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8以下
obj.attachEvent('on'+ev,fn);
}else{
//FF,Chrome,IE9-10
obj.attachEventLister(ev,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});
7.關(guān)于獲取滾動條距離而出現(xiàn)的問題
當(dāng)我們獲取滾動條滾動距離時:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容處理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
html兼容
JS中出現(xiàn)的兼容性問題的總結(jié)
1.關(guān)于獲取行外樣式 currentStyle 和 getComputedStyle 出現(xiàn)的兼容性問題
我們都知道js通過style不可以獲取行外樣式搏明，當(dāng)我們需要獲取行外樣式時:
我們一般通過這兩個方法獲取行外樣式：
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
兼容兩個瀏覽器的寫法:
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}
*注:在解決很多兼容性寫法時,都是用if..else..
封裝一個獲取行外樣式的函數(shù):(兼容所有瀏覽器,包括低版本IE6,7)
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return getComputedStyle(obj,false)[name];
}
}
?? ?調(diào)用：getStyle(oDiv,'width');
2.關(guān)于用“索引”獲取字符串每一項出現(xiàn)的兼容性問題:
對于字符串也有類似于 數(shù)組 這樣的通過 下標(biāo)索引 獲取每一項的值,
var str="abcde";
aletr(str[1]);
但是低版本的瀏覽器IE6,7不兼容
兼容方法:str.charAt(i)?? ?//全部瀏覽器都兼容
var str="abcde";
for(var i=0;i
alert(str.charAt(i));?? //放回字符串中的每一項
}
3.關(guān)于DOM中 childNodes 獲取子節(jié)點出現(xiàn)的兼容性問題
childNodes:獲取子節(jié)點,
--IE6-8:獲取的是元素節(jié)點,正常
--高版本瀏覽器:但是會包含文本節(jié)點和元素節(jié)點(不正常)
解決方法: 使用nodeType:節(jié)點的類型，并作出判斷
--nodeType=3-->文本節(jié)點
--nodeTyPE=1-->元素節(jié)點
例: 獲取ul里所有的子節(jié)點闪檬，讓所有的子節(jié)點背景色變成紅色
獲取元素子節(jié)點兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
注：上面childNodes為我們帶來的困擾完全可以有children屬性來代替星著。
children屬性:只獲取元素節(jié)點,不獲取文本節(jié)點,兼容所有的瀏覽器，
比上面的好用所以我們一般獲取子節(jié)點時,最好用children屬性粗悯。
var oUl=document.getElementById('ul');
oUl.children.style.background="red";
4.關(guān)于使用 firstChild,lastChild 等虚循，獲取第一個/最后一個元素節(jié)點時產(chǎn)生的問題
--IE6-8下: firstChild,lastChild,nextSibling,previousSibling,獲取第一個元素節(jié)點
(高版本瀏覽器IE9+,FF,Chrome不兼容,其獲取的空白文本節(jié)點)
--高版本瀏覽器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
(低版本瀏覽器IE6-8不兼容)
--兼容寫法: 找到ul的第一個元素節(jié)點,并將其背景色變成紅色
var oUl=document.getElementById('ul');
if(oUl.firstElementChild){
//高版本瀏覽器
oUl.firstElementChild.style.background='red';
}else{
//IE6-8
oUl.firstChild.style.background='red';
}
5.關(guān)于使用 event對象，出現(xiàn)的兼容性問題
如: 獲取鼠標(biāo)位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 傳參ev--> ev.clientX;ev.clientY
獲取event對象兼容性寫法: var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}
6.關(guān)于為一個元素綁定兩個相同事件：attachEvent/attachEventLister 出現(xiàn)的兼容問題
事件綁定:(不兼容需要兩個結(jié)合做兼容if..else..)
IE8以下用: attachEvent('事件名',fn);
FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);
多事件綁定封裝成一個兼容函數(shù):
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
//IE8以下
obj.attachEvent('on'+ev,fn);
}else{
//FF,Chrome,IE9-10
obj.attachEventLister(ev,fn,false);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});
7.關(guān)于獲取滾動條距離而出現(xiàn)的問題
當(dāng)我們獲取滾動條滾動距離時:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容處理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
1样傍、float的div一定要閉合邮丰。
例如：（其中floatA、floatB的屬性已經(jīng)設(shè)置為
float:left铭乾；）<#div id="floatA"><#div id="floatB"〉<#div id=”NoTfloatC”>這里的NOTfloatC并不希望繼續(xù)平移剪廉，而是希望往下排。這段代碼在IE中毫無問題炕檩，問題出在FF斗蒋。原因是NOTfloatC并非float標(biāo)簽，必須將float標(biāo)簽閉合笛质。
在<#div class=”floatB”〉
<#div class=”NOTfloatC”>之間加上<#div class=”clear”>這個div一定要注意聲明位置泉沾，一定要放在最恰當(dāng)?shù)牡胤剑冶仨毰c兩個具有float屬性的div同級妇押，之間不能存在嵌套關(guān)系跷究，否則會產(chǎn)生異常。
并且將clear這種樣式定義為為如下即可：.clear{clear:both敲霍；}此外俊马，為了讓高度能自動適應(yīng)丁存，要在wrapper里面加上overflow:hidden；當(dāng)包含float的box的時候柴我，高度自動適應(yīng)在IE下無效解寝，這時候應(yīng)該觸發(fā)IE的1ayout私有屬性（萬惡的IE啊Ｋ胰濉）用zoom：1聋伦；可以做到，這樣就達(dá)到了兼容界睁。例如某一個wrapper觉增，
詳情請看此網(wǎng)站https://wenku.baidu.com/view/5c6c2daae009581b6bd9eb69.html
