前端瀏覽器兼容問題及解決辦法

什麼是兼容問題？

　　所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。在大多數狀況下，咱們的需求是，

不管用戶用什麼瀏覽器來查看咱們的網站或者登錄咱們的系統，都應該是統一的顯示效果。因此瀏覽器的兼容性問題是前端開發人員常常會碰到和必須

要解決的問題。

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