常見的瀏覽器相容問題

2022-05-18 03:37:13 字數 2061 閱讀 8196

1 ie6.0橫向

margin

加倍產生因素:塊屬性、float

、有橫向

margin

。解決方法:display

:inline

;2 ie6.0下預設有行高

解決方法:overflow:hidden;

或font-size:0;

或line-height

:xx px

;3 在各個瀏覽器下

img有空隙

(原因是:回車。

)解決方法:

讓浮動。

4 乙個父標籤與幾個子標籤巢狀,父標籤不浮動,子標籤

float

,子標籤不撐開父的高度。

解決方法:a 

在子標籤最後清浮動

b 父標籤新增

c 給父標籤設定高度

5 ie6下,不識別最大寬、高度和最小寬高度,意即

min-width/height

和 max-width/height

在ie6

中沒效果,

解決方法:(1)

:.abc

html>body .abc

(2):

.abc

(因為ie6

有乙個特徵,當定義乙個高度時,如果內容超過高度,元素會自動調整高度。)

6 一般情況下,最外層

div不設寬高,是為了可擴充套件讓內容撐開寬、高度,如果裡面的元素浮動的話,就無法撐開外層

div的寬、高度

.解決方法:直接在外層div

中加overflow:hidden;

但是在ie6

中不起作用

.解決方法是:

觸發ie6

的layout

的私有屬性,用

zoom:1

;可以做到,解決這個問題

7 ie6裡面:如

li設寬、高,並且

li裡面的標籤浮動,那麼

li之間會有間距

解決方法:li

不設寬、高或者

li內的標籤不浮動

8  當

li浮動,

ul/ol

沒有浮動且

ul/ol

設定padding-top

時,li

之間會有間距,間距值為

padding-top

的值。解決方法:讓

ul/ol

浮動,或者為

ul/ol

設定高度值。

9 3畫素問題:

ie6下,當浮動元素與流動元素並列顯示時,他們之間會存在三畫素問題。

解決方法:用hack

技術, 例如:所有瀏覽器通用 

height:100px; 

ie6專用

_height:100px;

ie7專用

*+height:100px; 

ie6/ie7共用

*height:100px;

10 當定義行內元素為包含框時,且包含框包含的絕對定位元素以百分比為單位進行定位時,會出現混亂。

解決方法:在行內元素裡加入

11 當多個浮動元素中間夾雜著

html

注釋語句時,如果浮動元素寬度為

100%

12 opacity 定義元素的不透明度

filter:

alpha

(opacity=80

);/*ie

支援該屬性

*/opacity:

0.8;

/*支援

css3

的瀏覽器

*/13 兩個塊元素,豎向的

margin

值不增加,會重疊,其間距為最大

margin

值。14 優先順序:被

!important 

註明的css

屬性具有最高優先順序

(.abc)

。但在ie6

中!important

具有乙個

bug:

在同一組

css屬性中,

!important

不起作用。

常見瀏覽器相容問題

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

常見瀏覽器相容問題

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

常見瀏覽器相容問題

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