談談那些讓人頭疼的瀏覽器相容問題

2021-09-12 10:53:54 字數 1509 閱讀 1586

瀏覽器相容性問題,是因為不同瀏覽器的核心不同,導致各個瀏覽器對網頁的解析存在一定的差異,對同一段**有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的**或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。做前端最怕什麼?就是ie6!調個相容能被搞得心力憔悴。前端最喜歡看到的就是各家瀏覽器大統一,告別瀏覽器相容除錯。

常見的瀏覽器核心可以分四種:trident、gecko、blink、webkit

瀏覽器核心

ie瀏覽器

trident核心,也稱為ie核心

chrome瀏覽器

blink核心

firefox瀏覽器

gecko核心,俗稱firefox核心

safari瀏覽器

webkit核心

opera瀏覽器

最初是自己的presto核心,後來從webkit又到了blink核心;

360瀏覽器

ie+chrome雙核心

獵豹瀏覽器

ie+chrome雙核心

ie核心

qq瀏覽器

trident(相容模式)+webkit(高速模式)

以下列出一些常見的瀏覽器相容問題:

1.不同瀏覽器的標籤預設的margin和padding不同

不同的標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。

body,h1,h2,h3,ul,li,input,div,span,a,form ……
2.設定較小高度標籤(一般小於10px),在ie6,ie7,遨遊中高度超出自己設定高度

3.ie6雙邊距問題,在ie6中設定了float , 同時又設定margin , 就會出現邊距問題

4.預設有間距

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

6.cursor:hand 顯示手型在safari 上不支援

7.邊距重疊問題

當相鄰兩個元素都設定了margin 邊距時,margin 將取最大值,捨棄最小值;

8.兩個塊級元素,父元素設定了overflow:auto;子元素設定了position:relative ;且高度大於父元素,在ie6、ie7會被隱藏而不是溢位;

9.標籤最低高度設定min-height不相容

min-height本身就是乙個不相容的css屬性,所以設定min-height時不能很好的被各個瀏覽器相容

瀏覽器

寫法通用

height: 100px;

ie6 專用

_height: 100px;

ie6 專用

*height: 100px;

ie7 專用

*+height: 100px;

ie7、ff 共用

height: 100px !important;

————願你在迷茫時,堅信你的珍貴,愛你所愛,行你所行,聽從你心,無問西東。

解決令人頭疼的IE瀏覽器錯誤

1 如何解除對右鍵的禁止?答 在頁面中按下右鍵,出現資訊提示視窗後,不鬆開右鍵 即繼續保持按下狀態 再將滑鼠指標移動到資訊提示視窗的 確定 按鈕上,同時按下左鍵,然後鬆開滑鼠右鍵,右鍵選單彈出,這樣就可以檢視網頁原始檔 拷貝文字和了。2 每次瀏覽網頁後雖然我已刪除了歷史記錄,但位址列裡還是會出現瀏覽...

相容 瀏覽器相容那些事

這段時間,經常會接到很多需要處理瀏覽器相容問題的工作。開個玩笑的說,如果看到乙個人的電腦裝了很多瀏覽器,那麼勇敢地懷疑他的崗位是不是web前端開發吧。有一段時間,我的電腦同時安裝了chrome ff 360 ie 搜狗和yy瀏覽器,另外還有ietester用作除錯不同版本的ie。瀏覽器相容一事是前端...

瀏覽器的相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。解決方案 css裡 瀏覽器相容問題二 塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大 問題症狀 常見症狀...