前端瀏覽器相容性問題

2021-10-09 18:16:15 字數 1260 閱讀 7612

在前端開發的過程中我們不可避免的會遇到瀏覽器相容性問題,這也是我們必須要解決的問題。首先來了解一下為什麼存在瀏覽器相容性問題。

現在的市場上有很多種類的瀏覽器,不同種類的瀏覽器的核心也不盡相同,所以不同瀏覽器對**的解析會存在差異,這就導致對頁面渲染效果不統一的問題。

市場上常見的瀏覽器核心主要有四種:webkit核心、presto核心、trident核心、gecko核心。

css相容

問題一:不同瀏覽器的標籤預設的外補丁(margin)和內補丁(padding)不同

問題表現:標籤在不加樣式的情況下外補丁(margin)和內補丁(padding)存在差異

解決方法:在css裡新增如下**

*

問題二:ie6下margin值雙倍邊距問題

問題表現:ie6下元素浮動之後margin值變成雙倍

解決方法:將元素轉為行內屬性

問題三:height值設定過小問題

問題表現:ie6、ie7下設定標籤高度小於10px,存在超出已設定的高度的問題

解決方法:為超出高度的元素新增溢位部分隱藏

問題四:標籤min-height屬性不相容問題

問題表現:min-height屬性本身就是乙個不相容css屬性,所以min-height不能很好地被各個瀏覽器相容

解決方法:例如要為乙個標籤設定最小高度為200px

問題五:元素img下預設有間距

解決方法:使用float屬性

問題六:opacity多瀏覽器透明度相容問題

問題表現:opacity是css3裡的屬性,只有部分瀏覽器支援

解決方法:使用各個瀏覽器的私有屬性以支援opacity

問題七:firefox和chrome不相容cursor:hand

解決方法:cursor:poniter相容所有瀏覽器

問題八:ie6的3px bug

問題表現:乙個標籤浮動,另乙個不浮動的元素自然上浮與之靠近出現3px間距

解決方法:對浮動的標籤設定_margin-right: -3px;

前端瀏覽器相容性問題 一

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

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...

瀏覽器相容性問題

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