瀏覽器的相容性

2021-09-18 03:43:23 字數 1636 閱讀 1028

html5有很多新增的標籤,在不支援html5的瀏覽器中不能正常顯示。

解決方法:

使用html5的靜態資源;

加入指令碼**,document.createelement建立新的標籤,並display:block;設定為塊型別

1、png24位的在ie6瀏覽器上出現背景,解決方案是做成png8

2、瀏覽器預設的margin和padding不同,解決方案是 *

3、ie6雙邊距bug:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大

浮動ie產生的雙倍距離

#box

這種情況下ie會產生20px的距離

解決方案是在float的標籤樣式中加入_display:inline;(_這個符號只有ie6會識別)

4、ie相容

漸進識別的方式

首先,"\9"將ie9瀏覽器從所有情況下分離出來

接著,"+"將ie8和ie7、ie6分離開來

.box

5、ie條件注釋

6、ie6無法定義1px左右高度的容器,是因為預設的行高造成的,解決的方法也有很多,

例如: overflow:hidden zoom:0.08 line-height:1px

7、使用margin:0 auto;方法使容器居中依然在ie6中行不通,我們要對其父容器使用text-align:center;

8、超連結訪問順序l-v-h-a a:lind,a:visited,a:hover.a:active

9、chrome中文介面下缺省會將小於12px的文字強制按照12px顯示

解決方案:-webkit-text-size-adjust:none;

10、在使用絕對定位/相對定位時,設定z-index在ie中可能會失效

是因為其元素依賴於其父元素的z-index,而父元素預設為0,所以子元素z-index高,而父元素低,依然不會改變其顯示順序;

1、在標準的事件繫結中繫結事件的方法函式為 addeventlistener,而ie使用的是attachevent

2、標準瀏覽器採用事件捕獲的方式對應ie的事件冒泡機制(即標準由最外元素至最內元素或者ie由最內元素到最外元素)最後標準方亦覺得ie這方面的比較合理,所以便將事件冒泡納入了標準,這也是addeventlistener第三個引數的由來,而且事件冒泡作為了預設值。

3、事件處理中event屬性,標準瀏覽器是作為引數帶入,而ie是window.event方式獲得。

4、獲得目標元素ie為e.srcelement 標準瀏覽器為e.target

5、ie下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getattribute()獲取自定義屬性;

firfox只能使用getattribute()獲取自定義屬性;

解決方法:統一使用getattribute()

6、ie下,event物件有x,y屬性,但是沒有pagex,pagey屬性;

firefox,event物件有pagex,pagey屬性,但是沒有x,y屬性。

解決方法:條件注釋

瀏覽器相容性

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

瀏覽器相容性

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

瀏覽器相容性

trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...