瀏覽器相容性

2021-07-30 07:34:31 字數 1089 閱讀 7561

trident(ie核心)

gecko(firefox 核心)

webkit(chrome,safari )

blink (webkit 的分支)

presto 是挪威產瀏覽器 opera 的 「前任」 核心,為何說是 「前任」,因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。

移動端的瀏覽器核心主要說的是系統內建瀏覽器的核心。

ie6下margin雙倍邊距bug

一、什麼是雙邊距bug?

我們要讓綠色盒模型在藍色盒模型之內向左浮動,並且距藍色盒模型左側100畫素。這個例子很常見,比如在網頁布局中,側邊欄靠左側內容欄浮動,並且要留出內容欄的寬度。要實現這樣的效果,我們給綠色盒模型應用以下css屬性:

以下為引用的內容:

.floatbox {

float: left;

width: 150px;

height: 150px;

margin: 5px 0 5px 100px;

很簡單,對吧?但是當我們在ie6中檢視時,會發現左側外邊距100畫素,被擴大到200個畫素。如下圖:

二、怎麼會這樣?

說實話,這個原因還真是不清楚。但是這樣的結果確確實實在ie6中出現了。而且這種情況出現的條件是當浮動元素的浮動方向和浮動邊界的方向一致時才會出現。如同上面的例子一樣,元素向左浮動並且設定了左側的外邊距出現了這樣的雙邊距bug。同理,元素向右浮動並且設定右邊距也會出現同樣的情況。同一行如果有多個浮動元素,第乙個浮動元素會出現這個雙邊距bug,其它的浮動元素則不會。

三、如何修正這個bug?

很簡單,只需要給浮動元素加上display:inline;這樣的css屬性就可以了。就這麼簡單?對,就這麼簡單。如下圖:

瀏覽器相容性

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

瀏覽器相容性

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

瀏覽器相容性

瀏覽器相容性 必須要總結一下這個了 獲取document物件的文字內容 大部分瀏覽器都支援 innerhtml ie支援 innerhtml和innertext firefox支援 innerhtml和textcontent 事件event物件相關相容性問題 1 獲取event事件物件 chrome...