常見的瀏覽器相容性問題與解決方案 CSS篇

2022-03-03 09:57:56 字數 1045 閱讀 5557

1、不同的瀏覽器的標籤預設的外補丁和內補丁不同

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

碰到頻率:100%

解決方案:初始化css的預設樣式,*。也可以使用其他**的初始化**。

備註:這個是最常見的也是最容易解決的乙個瀏覽器相容性問題。

2、塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大

碰到頻率:90%

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

3、設定較小高度標籤,在ie6、ie7和遨遊瀏覽器中高度超出自己設定的高度

問題症狀:ie6、ie7和遨遊瀏覽器裡這個標籤的高度不受控制,超出自己設定的高度。

碰到頻率:60%

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

4、行內屬性標籤,設定display:block後採用float布局,又有橫行的margin的情況,ie6間距bug

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

碰到頻率:20%

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

5、預設有間距

問題症狀:幾個img標籤放在一起的時候,有些瀏覽器會有預設的間距,加了margin:0;和padding:0也不起作用。

碰到頻率:20%

解決方案:使用float屬性為img布局。

6、標籤最低高度設定min-height不相容

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

碰到頻率:20%

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

常見瀏覽器相容性問題

概念 不同的瀏覽器對同一段 解析不同造成瀏覽器顯示效果不同,我們把這樣的問題叫做瀏覽器相容性問題 描述 塊元素float後,又設定了橫向的margin值,在ie6下顯示的margin值比設定的值要大,並且是2倍關係 解決方案 給float的塊元素新增display inline 解決方案 a 給表單...

常見瀏覽器相容性問題與解決方式

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

常見瀏覽器相容性問題與解決方式

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