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

2021-10-19 11:56:20 字數 540 閱讀 9548

在前端專案中,經常會碰到需要處理不同瀏覽器相容性的css樣式,故在此做初步的記錄總結,後續繼續更新完善。

現象:不同瀏覽器標籤的margin/padding差異較大

解決方案:*

解決方案:在float的css標籤樣式控制中新增display:inline,將其轉換為行內屬性

原因:ie8以前的瀏覽器會給標籤乙個最小預設行高,即使為空

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

現象:幾個img標籤放在一起時,有些瀏覽器會有預設間距,即使使用問題一的萬用字元也不行

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

原因:min-height本身即相容性較差。 有時需求當容器高度小於300px時,為300px,大於時則被撐高,而不是出現功滾動條。此時會出現該問題

解決方案:採用

解決方案:設定透明度時,寫2個。

opacity:0;

filter:alpha(opacity:0)

常見瀏覽器相容性問題

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

常見的瀏覽器相容性問題

1.就是ie6雙倍邊距的問題,在使用了float的情況下,不管是向左還是向右都會出現雙倍,最簡單的解決方法就是用display inline 加到 css裡面去。2.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3...

常見瀏覽器相容性問題總結

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