常見的瀏覽器相容問題

瀏覽器相容性問題又被稱為網頁相容性或**相容性問題，指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的相容問題。所以在**的設計和製作中，做好瀏覽器相容，才能夠讓**在不同的瀏覽器下都正常顯示。

1.間隙

1. div中的間隙 3. hack：給

2.表單元素行高不一致(ie,moz,c,o,s)

1. bug：表單元素行高對齊方式不一致 2. hack：給表單元素新增宣告：float:left;

3.滑鼠指標bug

1. 描述：cursor屬性的hand屬性值只有ie8瀏覽器識別; 2. hack：如統一某元素滑鼠指標形狀為手型，應新增宣告：cursor:pointer;

4.萬能清除浮動法

1. 父元素選擇符:after

5.父元素裡有塊元素，如果給子元素新增新增margin-top,父元素會「掉」下來（高度塌陷）

1. hack1：給父元素新增overflow：hidden； 2. hack2：給子元素新增float； 3. hack3：給父元素加邊框；或者用其他的方法達到我們想要的效果：如給父元素加padding-top

1、event事件

通用方式
document.onclick=function(e)

2、一些「方法」的相容性寫法

停止事件傳播
if(evt.stoppropagation)else
阻止預設事件
if (e.preventdefault) else
獲取第乙個子節點（next，last都類似）
if (obj.lastelementchild) else;
設定監聽事件
//引數一：物件
//引數二：事件型別
//引數三：事件處理函式
function addevent(obj, type, fn) else
}

3、event.srcelement問題

ie：event物件有srcelement屬性，沒有target屬性； firefox:even物件有target屬性，沒有srcelement屬性。 srcobj = event.srcelement ? event.srcelement : event.target;

4、firefox與ie的父元素(parentelement)的區別

ie：obj.parentelement firefox：obj.parentnode

第一部分：什麼是css hack？

css hack是通過在css樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什麼樣的瀏覽器識別什麼樣的符號是有標準的，css hack就是讓你記住這個標準），以達到應用不同的css樣式的目的。

例如：1、margin屬性在ie6中顯示的距離會比其他瀏覽器中顯示的距離寬2倍，也就是說margin-left:20px;在ie6中距左側物件的實際顯示距離是40px，而在非ie6中顯示的距左側物件的距離是設定的值20px;所以要想設定乙個物件距離左側物件的距離在所有瀏覽器中都顯示是20px的寬度的樣式應為：.kwstu

2、kwstu，一般瀏覽器會先給元素使用width:300px;的樣式，緊接著後面還有個_width:200px;由於下劃線_width只有ie6可以識別，所以此樣式在ie6中實際設定物件的寬度為200px，後面的把前面的給覆蓋了，而其他瀏覽器不識別_width不會執行_width:200px;這句樣式，所以在其他瀏覽器中設定物件的寬度就是300px。

常見的瀏覽器相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

常見的瀏覽器相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

常見瀏覽器相容問題

相關推薦