瀏覽器相容性問題整理

一：不同瀏覽器的標籤預設的外邊距和內邊距不同。

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

解決方案：

這個是最常見的也是最易解決的乙個瀏覽器相容性問題，幾乎所有的css檔案開頭都會用萬用字元*來設定各個標籤的內外邊距為0。

ie6中

顯示的margin比設定的大。

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

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性。

ie7，遨遊中高度超出自己設定高度。

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

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

備註：出現這個問題的原因是

ie8之前的瀏覽器都會給標籤乙個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。

問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。

解決方案：使用float屬性為img布局或者刪除img之間的回車鍵

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

解決方案：如果我們要設定乙個標籤的最小高度200px，需要進行的設定為：

解決方案：

img

: 可以用 opacity  **如下：

/* 注意: opacity會影響裡面元素的透明度 */

解決方案

:

//原生js獲取事件物件相容性寫法:

dom.onclick = function (event)

相容性寫法：

//js阻止預設事件

document.οnclick=function(e)else
}

相容性寫法：

//js阻止事件傳播

document.οnclick=function(e)else
}

相容性寫法：

// 這裡使用click事件為例

//新增監聽事件
obj.addeventlistener('click',fn,false);//非ie
obj.attachevent('onclick',fn);// ie
// 刪除監聽事件
obj.removeeventlistener('click',fn,false);//非ie
obj.detachevent('onclick',fn);//ie

瀏覽器相容性問題整理

一 ie8 下無法識別後續以innerhtml方式新增的自定義標籤 例如要建立乙個自定義標籤thetag，事先已document.createelement thetag 但後續通過innerhtml的方式新增的該元素，ie8 是不認的。測試 如下 subject str 全部 subject se...

瀏覽器相容性問題歸納整理

1.ie6裡面的豎向滾動條失效 ie6裡面如果設定元素為橫向滾動條隱藏，豎向滾動條顯示，如果改原始內有元素設定position relative 或者position absolute 樣式，那麼ie6裡面的豎向滾動條就會失效。解決辦法 設定該元素為position relative top 0 l...

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常，可是在ie中一直repeat.背景是乙個關閉的x號，div設定的backgourn image url xx 結果在ie中卻不行，最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性，還有好多的差異，明天 去了 ...