前端開發人員須知的常見浏覽器相容問題及解決技巧

在前端開發中總會不可避免的遇到浏覽器的問題，是以掌握一些常見的解決浏覽器相容問題的方法技巧是非常有用的。首先，先解釋下為什麼會出現浏覽器的相容性問題

為什麼會有相容問題？

由于市場上浏覽器種類衆多，而不同浏覽器其核心亦不盡相同，是以各個浏覽器對網頁的解析就有一定出入，這也是導緻浏覽器相容問題出現的主要原因，我們的網頁需要在主流浏覽器上正常運作，就需要做好浏覽器相容。

目前市場上使用Trident核心的浏覽器：IE、Maxthon、TT；

使用Gecko核心的浏覽器：Netcape6及以上版本、FireFox；

使用Presto核心的浏覽器：Opera7及以上版本；

使用Webkit核心的浏覽器：Safari、Chrome。

在本文章中所說的相容性問題，主要是說IE與幾個主流浏覽器如firefox，google等。而對IE浏覽器來說，IE7又是個跨度，因為之前的版本更新甚慢，bug甚多。從IE8開始，IE浏覽器漸漸遵循标準，到IE9後由于大家都一緻認為标準很重要，可以說在相容性上比較好了，但是在中國來說，由于xp的占有率問題，使用IE7以下的使用者仍然很多，是以我們不得不考慮低版本浏覽器的相容。

接下來是一些常見的相容性問題及解決方案：

問題一：不同浏覽器的标簽預設的外邊距和内邊距不同

問題症狀：随便寫幾個标簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

解決方案：css裡 {margin:0;padding:0;}

問題二：塊屬性标簽float後，又有橫行的margin情況下，在ie6顯示margin比設定的大

問題症狀:常見症狀是ie6中後面的一塊被頂到下一行

解決方案：在float的标簽樣式控制中加入 display:inline;将其轉化為行内屬性

問題三：設定較小高度标簽（一般小于10px），在ie6，ie7，遨遊中高度超出自己設定高度

問題症狀：ie6、7和遨遊裡這個标簽的高度不受控制，超出自己設定的高度

解決方案：給超出高度的标簽設定overflow:hidden;或者設定行高line-height 小于你設定的高度。

問題四：行内屬性标簽，設定display:block後采用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）

問題症狀：ie6裡的間距比超過設定的間距

解決方案：在display:block;後面加入display:inline;display:table;

備注：行内屬性标簽，為了設定寬高，我們需要設定display:block;(除了input标簽比較特殊)。在用float布局并有橫向的margin後，在ie6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行内屬性标簽，是以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

問題五：圖檔預設有間距

問題症狀：幾個img标簽放在一起的時候，有些浏覽器會有預設的間距，加上問題一中提到的通配符也不起作用。

解決方案：使用float屬性為img布局；給img标簽加display:block;也是可以的

問題六：标簽最低高度設定min-height不相容

問題症狀：因為min-height本身就是一個不相容的css屬性，是以設定min-height時不能很好的被各個浏覽器相容

解決方案：如果我們要設定一個标簽的最小高度200px，需要進行的設定為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

問題七：IE9一下浏覽器不能使用opacity

解決方案：

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
           

問題八：邊距重疊問題；當相鄰兩個元素都設定了margin 邊距時，margin 将取最大值，舍棄最小值；

解決方案：為了不讓邊重疊，可以給子元素增加一個父級元素，并設定父級元素為overflow:hidden；

問題九：兩個塊級元素，父元素設定了overflow:auto；子元素設定了position:relative ;且高度大于父元素，在IE6、IE7會被隐藏而不是溢出；

解決方案：父級元素設定position:relative

問題十：cursor:hand 顯示手型在safari 上不支援

解決方案：統一使用 cursor:pointer

問題十一： 鍵盤事件 keyCode 相容性寫法

var inp = document.getElementById('inp')
var result = document.getElementById('result')

function getKeyCode(e) {
  e = e ? e : (window.event ? window.event : "")
  return e.keyCode ? e.keyCode : e.which
}

inp.onkeypress = function(e) {
  result.innerHTML = getKeyCode(e)
}
           

問題十二：求視窗大小的相容寫法

// 浏覽器視窗可視區域大小（不包括工具欄和滾動條等邊線）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 網頁内容實際寬高（包括工具欄和滾動條等邊線）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 網頁内容實際寬高 (不包括工具欄和滾動條等邊線）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滾動的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
           

暫時能想到的也就這些了，後續會在補充更新，歡迎大家熱心補充啊:)