概念
所謂的瀏覽器兼容性問(wèn)題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析尸曼，造成頁(yè)面顯示效果不統(tǒng)一的情況们何。在大多數(shù)情況下，我們的需求是控轿，無(wú)論用戶用什么瀏覽器來(lái)查看我們的網(wǎng)站或者登陸我們的系統(tǒng)冤竹，都應(yīng)該是統(tǒng)一的顯示效果。所以瀏覽器的兼容性問(wèn)題是前端開發(fā)人員經(jīng)常會(huì)碰到和必須要解決的問(wèn)題解幽。接下來(lái) 淺談一下瀏覽器兼容性遇到的問(wèn)題及解決辦法贴见。
css常見兼容性問(wèn)題
1.不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問(wèn)題癥狀：隨便寫幾個(gè)標(biāo)簽烘苹，不加樣式控制的情況下躲株，各自的margin 和padding差異較大。
解決方案：css 里 *{margin:0;padding:0;}
備注：這個(gè)是最常見的也是最易解決的一個(gè)瀏覽器兼容性問(wèn)題镣衡，幾乎所有的CSS文件開頭都會(huì)用通配符來(lái)設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0霜定。
2.塊屬性標(biāo)簽float后，又有橫行的margin情況下廊鸥，在IE6顯示margin比設(shè)置的大
問(wèn)題癥狀：常見癥狀是IE6中后面的一塊被頂?shù)较乱恍?br> 解決方案：在float的標(biāo)簽樣式控制中加入 display:inline;將其轉(zhuǎn)化為行內(nèi)屬性
備注：我們最常用的就是div+CSS布局了望浩，而div就是一個(gè)典型的塊屬性標(biāo)簽，橫向布局的時(shí)候我們通常都是用div float實(shí)現(xiàn)的惰说，橫向的間距設(shè)置如果用margin實(shí)現(xiàn)磨德，這就是一個(gè)必然會(huì)碰到的兼容性問(wèn)題。
3.設(shè)置較小高度標(biāo)簽（一般小于10px）吆视，在IE6典挑，IE7，遨游中高度超出自己設(shè)置高度
問(wèn)題癥狀：IE6啦吧、7和遨游里這個(gè)標(biāo)簽的高度不受控制您觉，超出自己設(shè)置的高度
解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height 小于你設(shè)置的高度。
備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里授滓。出現(xiàn)這個(gè)問(wèn)題的原因是IE8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度琳水。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高般堆。
4.圖片默認(rèn)有間距
問(wèn)題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候在孝，有些瀏覽器會(huì)有默認(rèn)的間距，加了問(wèn)題一中提到的通配符也不起作用淮摔。
解決方案：使用float屬性為img布局
備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽私沮，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里噩咪，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距顾彰。去掉這個(gè)間距使用float是正道极阅。（不建議負(fù)margin，但負(fù)margin本身就是容易引起瀏覽器兼容問(wèn)題的用法涨享。）
5. IE9一下瀏覽器不能使用opacity
解決方案：opacity: 0.5;filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
6. 邊距重疊問(wèn)題筋搏；當(dāng)相鄰兩個(gè)元素都設(shè)置了margin 邊距時(shí)，margin 將取最大值厕隧，舍棄最小值奔脐；
解決方案：為了不讓邊重疊，可以給子元素增加一個(gè)父級(jí)元素吁讨，并設(shè)置父級(jí)元素為overflow:hidden髓迎；
7.cursor:hand 顯示手型在safari 上不支持
解決方案：統(tǒng)一使用 cursor:pointer
8.兩個(gè)塊級(jí)元素，父元素設(shè)置了overflow:auto建丧；子元素設(shè)置了position:relative ;且高度大于父元素排龄，在IE6、IE7會(huì)被隱藏而不是溢出
解決方案：父級(jí)元素設(shè)置position:relative翎朱。
html 常見兼容性問(wèn)題
js 常見兼容性問(wèn)題
1. const問(wèn)題
問(wèn)題癥狀：Firefox下,可以使用const關(guān)鍵字或var關(guān)鍵字來(lái)定義常量;IE下,只能使用var關(guān)鍵字來(lái)定義常量.
解決方案：統(tǒng)一使用var關(guān)鍵字來(lái)定義常量橄维。
2. event事件問(wèn)題：
//event事件問(wèn)題
document.onclick=function(ev){//谷歌火狐的寫法，IE9以上支持拴曲，往下不支持争舞；
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持澈灼；
var e=event;
console.log(e);
}
document.onclick=function(ev){//兼容寫法竞川；
var e=ev||window.event;
var mouseX=e.clientX;//鼠標(biāo)X軸的坐標(biāo)
var mouseY=e.clientY;//鼠標(biāo)Y軸的坐標(biāo)
}
3. 設(shè)置監(jiān)聽事件
function addEvent(obj,type,fn){//添加事件監(jiān)聽，三個(gè)參數(shù)分別為 對(duì)象叁熔、事件類型委乌、事件處理函數(shù)，默認(rèn)為false
if (obj.addEventListener) {
obj.addEventListener(type,fn,false);//非IE
} else{
obj.attachEvent('on'+type,fn);//ie,這里已經(jīng)加上on者疤，傳參的時(shí)候注意不要重復(fù)加了
};
}
function removeEvent(obj,type,fn){//刪除事件監(jiān)聽
if (obj.removeEventListener) {
obj.removeEventListener(type,fn,false);//非IE
} else{
obj.detachEvent('on'+type,fn);//ie福澡，這里已經(jīng)加上on，傳參的時(shí)候注意不要重復(fù)加了
};
}
4. 阻止事件傳播：
//js阻止事件傳播驹马，這里使用click事件為例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C標(biāo)準(zhǔn)
}else{
e.cancelBubble=true;//IE....
}
}
5. 阻止默認(rèn)事件：
//js阻止默認(rèn)事件
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C標(biāo)準(zhǔn)
}else{
e.returnValue='false';//IE..
}
}
6. 關(guān)于EVENT事件中的target：
//關(guān)于event事件中的target
document.onmouseover=function(e){
var e=e||window.event;
var Target=e.target||e.srcElement;//獲取target的兼容寫法革砸，后面的為IE
var from=e.relatedTarget||e.formElement;//鼠標(biāo)來(lái)的地方，同樣后面的為IE...
var to=e.relatedTarget||e.toElement;//鼠標(biāo)去的地方
}
