常見瀏覽器相容問題

2022-09-06 22:21:28 字數 1130 閱讀 1952

1、標籤和body有預設的padding和margin

解決方法:在css樣式開頭設定margin與padding為0

2、ie6中顯示橫向margin加倍

滿足條件:① 在ie6.0下

② 有橫向的margin

③ 有float(浮動)

④ 塊屬性

解決方法:給浮動的塊屬性元素加乙個display:inline;使得產生bug的四個條件不能同時滿足。

注:display:inline 使得被賦予屬性的元素以行元素形式顯示,相對的是display:block;使元素以塊屬性顯示。

3、ie6.0下有預設行高

解決方法:多設定一條屬性 overflow:hidden;

注:overflow:hidden;具有清除標籤內部浮動的作用。

4、無序列表(ul li)和有序列表(ol li)中的 li 如果在不浮動的情況下,父級標籤又沒有設定高度,在ie6.0和ie7.0會多出幾畫素。

原因:在ie6.0和ie7.0中,li 設定了寬高,li 內標籤float

解決方法:① li 不設定寬和高

② li 裡面的標籤不能有浮動

5、各個瀏覽器下 img 有空隙產生

解決方法:讓浮動。

6、a 標籤巢狀 img 時,在不同瀏覽器會出現不同邊框

解決方法:對 a 下的 img 加上 border:none; 

7、乙個父級標籤與幾個子級標籤巢狀,子標籤float父標籤不浮動

解決方法:①在子標籤最後清除浮動

float的子標籤

float的子標籤

float的子標籤

②對父級標籤設定overflow:hidden. 利用瀏覽器解析機制,將父標籤撐大。

總結:

1、bug經常出現在ie6.0當中,由於ie6.0有著巨大的使用者群,因此測試網頁不得不將其考慮在內

2、很多相容問題是由於標籤的不合理巢狀,標籤的使用不規範產生的

3、css樣式使用不當也能造成相容問題

常見瀏覽器相容問題

1 針對ie5以下和 ie5 firefox 引入檔案區別 import url newstyle.css 後者可以識別,前者不能識別 2 針對ie和firefox指定裝置型別選項 import url newstyle.css screen 後者可以識別,前者不能識別 3 注釋區別 content...

常見瀏覽器相容問題

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

常見瀏覽器相容問題

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...