前端瀏覽器常見相容性問題及解決方案

2021-10-10 23:16:03 字數 781 閱讀 4825

目錄

1. 最常見的:每個瀏覽器的預設margin,padding大小都不同,當設定定位時會有些許差異。

2. 預設有間距:當幾個img標籤放到一起時,有些瀏覽器會有預設間距,加上第一條的設定的萬用字元樣式也無用。

3. min-height問題:由於min-height本身就是乙個不相容的css屬性,所以設定min-height不能被各個瀏覽器很好的相容。

4. 常見事件相容性問題解決方案:[答案在這裡哦](

5. ie9以下瀏覽器不能使用opacity

6. 邊距重疊問題:當相鄰的兩個元素都設定了margin邊距時,margin會取最大值,捨棄最小值。

解決方案:這也是最容易解決的, 在css樣式檔案中重置margin,padding

*
解決方式:使用float屬性讓其浮動,消除間距

解決方案:如果需要設定乙個最小寬度200px,需要進行如下設定:

.test

解決方案:如下

opacity: 0.5;

filter: alpha(opacity = 50);

filter: progid:dximagetransform.microsoft.alpha(style = 0, opacity = 50);

解決方案:為了不讓邊重疊,可以給子元素增加乙個父級元素,並設定父級元素為overflow:hidden

前端常見瀏覽器相容性問題及解決辦法

不同瀏覽器的核心也不盡相同,所以各個瀏覽器對網頁的解析存在一定的差異。1.不同瀏覽器的標籤預設的外補丁和內補丁不同 2.塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大 style3.設定較小高度標籤 一般小於10px 在ie6,ie7,遨遊中高度超出自己設定...

前端瀏覽器相容性問題

在前端開發的過程中我們不可避免的會遇到瀏覽器相容性問題,這也是我們必須要解決的問題。首先來了解一下為什麼存在瀏覽器相容性問題。現在的市場上有很多種類的瀏覽器,不同種類的瀏覽器的核心也不盡相同,所以不同瀏覽器對 的解析會存在差異,這就導致對頁面渲染效果不統一的問題。市場上常見的瀏覽器核心主要有四種 w...

常見瀏覽器相容性問題

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