瀏覽器相容性及解決辦法

2021-09-17 19:00:30 字數 1150 閱讀 3516

五大瀏覽器核心

trident ( ie )

gecko (mozilla firefoxgecko)

prezto (operapresto 公認速度快)

webkit (safari chrome)

blink 基於webkit(google 和 opera 開發的瀏覽器排版引擎)

ie6常見css解析bug及hack

1 有邊框

hack:給加border:0 /none

2 間隙,div裡巢狀img會產生3-6畫素間隙

3雙向浮向(雙倍邊距)(只有ie6出現)

hack:給浮動元素加申明,display:inline

4 ie6及以下款元素有預設高度

hack1:font-size:0

hack2:overflow:hidden

5表單元素行高對齊不一致

hack:float:left

6百分比bug

ie6,會按照四捨五入,50%+50%》100%

hack: clear:right /left/both(清楚有浮動)

7透明屬性

opacity:value

ie瀏覽器寫法 filter:alpha(opacity=value)

8li列表的bug

a 當父元素(li) 有float:left;子元素(a) 沒設定浮動的情況下會出現垂直bug;

hack:給父元素li和子元素a都設定浮動;

b 當給li中的a轉成block;並且有height,並有float的,li中沒設定浮動會出現階梯顯示hack:同時給li加float;

9當前元素(父元素裡面第乙個子元素)與父元素沒有設定任何浮動的情況下,設定margin-top後,會錯誤的把margin-top加在父級元素上

hack:1、給父級元素新增overflow:hidden;(推薦使用)

hack:2、給父元素或者子元素加浮動

附上cursor屬性:

auto預設

crosshair加號

text文字

wait等待

help幫助

progress過程

inherit繼承

move移動

ne-resize向上或向右移動

pointer手形

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

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

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...

瀏覽器相容性

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