什么是兼容問題？
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，
無論用戶用什么瀏覽器來查看我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須
要解決的問題。
CSS里的兼容性問題
1.cursor:hand VS cursor:pointer
firefox 不支持hand，但ie支持 pointer
解決方法:統一使用pointer
2. innerText在IE中能正常工作，但在FireFox中卻不行
解決方法:
需用textContent
if(navigator.appName.indexOf("Explorer")>-1){ document.getElementById('element').innerText = "my text"; }else{ document.getElementById('element').textContent = "my text"; }
3. CSS透明
IE：filter:alpha(opacity=60)。
FF：opacity:0.6。
4.盒子模型
標准 w3c 盒子模型的范圍包括 margin、border、padding、content，並且 content 部分不包含其他部分； IE盒子模型的范圍也包括
margin、border、padding、content。和標准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 padding。
因此，問題主要表現在css中的width是否計算border和padding的問題，這個是默認的盒子解析模型不同導致的。
IE6：中包括border和padding(box-sizing: border-box;)
IE7和非IE：width寬度不包括border和padding(box-sizing: content-box;)
解決方式： 根據使用方式，寫好box-sizing屬性。
5.塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題症狀:常見症狀是IE6中后面的一塊被頂到下一行
解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性
備注：我們最常用的就是div+CSS布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距
設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
6.圖片默認有間距
問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距。
解決方案：使用float屬性為img布局
備注：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這
個間距使用float是正道。
7.萬能清除浮動
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;
}
8.IE捉迷藏的問題
當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。 有些內容顯示不出來，當鼠標選擇這個區域是發現
內容確實在頁面。
解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。
9.溢出顯示省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:200px; }
這個是在越出長度后會自行的截掉多出部分的文字，並以省略號結尾，很好的一個技術。只是目前Firefox並不支持。
10.IE6下圖片下有空隙產生
解決這個BUG的技巧有很多,可以是改變html的排版,或者設置img為display:block。
11.超鏈接訪問過后hover樣式就不出現的問題
解決技巧
a:link {} a:visited {} a:hover {} a:active {}
js里面的兼容性問題
1.const問題
說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;
IE下,只能使用var關鍵字來定義常量.
解決方法：統一使用var關鍵字來定義常量.
2.event.srcElement問題
說明：IE下，event對象有srcElement屬性，但是沒有target屬性；Firefox下，even對象有target屬性，但是沒有srcElement屬性。
解決方法：使用srcObj =event.srcElement ?event.srcElement : event.target;
3.事件綁定
IE：dom.attachEvent();
其他瀏覽器：dom.addEventListener();
標准瀏覽器采用事件捕獲的方式對應IE的事件冒泡機制（即標准由最外元素至最內元素或者IE由最內元素到最外元素）最后標准方亦覺得IE這
方面的比較合理，所以便將事件冒泡納入了標准，這也是addEventListener第三個參數的由來，而且事件冒泡作為了默認值。
4.ajax略有不同
IE:ActiveXObject
其他：xmlHttpReuest