常見的瀏覽器相容及一些解決方案

2021-10-03 04:04:08 字數 2598 閱讀 7487

-------- 由於各大主流瀏覽器由不同的廠家開發,使用的核心版本是不一樣的,所用的核心架構和**也很難重和,這就為各種莫名其妙的bug(**錯誤)提供了溫床

---------以下是一些常見的相容性問題(^ _ ^):

1、 不同瀏覽器的標籤缺省外補丁margin和內補丁padding不同

解決方法:

hack1: 使用css萬用字元設定margin和padding為0,

hack2: 或者給每個有內外間距的標籤設定margin和padding為0

2、 給子元素新增margin-top後,瀏覽器會錯誤的把margin-top給了父元素

解決方法:

hack1: 給子元素或者父元素設定浮動(float)

hack2: 給父元素新增上邊框(border-top:)

hack3: 給父元素新增overflow:hidden;

3、 在網頁中插入時,會向下方撐大大約三畫素。

解決方法:

hack1: 使用 vertical-align:top/bottom/middle解決,使用其中乙個即可

hack2: 使用 display:block;改變元素型別也可以解決

4、 塊屬性標籤float之後,又有橫向的margin值,在ie6中顯示會比設定的大(ie6雙邊距bug)解決方法:

hack1: 在float標籤樣式控制中加入display:inline

5、cursor屬性的hand屬性值只有ie9以下瀏覽器識別,其它瀏覽器不識別該宣告(滑鼠指標bug)

解決方法:

hack1: 直接使用cursor:pointer

6、 當加在ie上的瀏覽器會出現邊框解決方法:7、 使用表單元素時,表單元素距離頂部間距不一致解決方法:

hack1: 給表單元素新增浮動:float:left;

8、 瀏覽器的字型不統一解決方法:

hack1: 給body統一設定字型

9、 瀏覽器的透明度相容解決方法

一條**全解決:

.transparent_class
10、 谷歌瀏覽器最小字型大小支援到12px,12px以下的字型大小不支援解決方法:

hack1: 直接切圖

hack2: 在html或者body裡新增一句谷歌瀏覽器專有的屬性:-webkit-text-size-adjust:none;(新版本的谷歌瀏覽器裡已失效)

hack3: 使用css3的乙個縮放屬性:transform:scale(),來使字型大小改變大小

11、在ie7或者ie6及以下版本中,部分塊元素擁有預設高度(在16px左右;)解決方法:

hack1: 給元素新增宣告:font-size:0;

hack2: 給元素新增宣告:overflow:hidden;

12、 在ie6及以下版本中在解析百分比時,會按四捨五入方式計算從而導致50%加 50%大於100%的情況。(也會受系統影響)解決方法:

hack1:給右面的浮動元素新增宣告:clear:right;

13、如果設定了input的高度,在其他瀏覽器上顯示的value的內容是垂直居中的,但是在ie6上是在頂部

解決方法:

hack1: 給input新增乙個行高等於它的高度。

瀏覽器常見相容問題及解決方案一

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

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

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

瀏覽器相容問題 及 解決方案 (一)

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