瀏覽器相容性

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

pc的情況是這樣，移動端的情況更複雜，除了要適配不同的平台和瀏覽器，還需要適配不同的螢幕，不同的硬體。

而要寫出相容性良好的**，一是要了解規範，了解每個特性的實現原理，二是要了解各個瀏覽器核心的差異，三是要多嘗試多踩坑，多積累。

下面介紹一下瀏覽器相容性問題的大致分類，更多的細節可以到w3help查詢。

目前主要是一些瀏覽器對html5的新特性不能完全支援，在使用html5新特性之前，可以在caniuse上查詢特性的支援情況，也可以在html5test這個**查詢各個瀏覽器對html的支援情況。

如果想在不支援html5的瀏覽器裡繼續使用html的標籤，可以用html5shiv

border-box：width=content + l/r padding + l/r border（ie盒模型）

content-box:width = content-width(標準和模型)

市場上的瀏覽器對css3的特性支援不夠完整，或者不同的廠商對同乙個屬性的實現不一樣，所以出現了瀏覽器字首。常見的瀏覽器字首

需要新增瀏覽器字首的屬性有：

1

2 
3 
4 
5 

.transparent

1

2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 

if (!array.prototype.indexof)

return -1;
}; 
} 

1

2 
3 
4 

var obj = 

事件繫結

1

2 
3 
4 
5 
6 
7 
8 
9 

addhandler：function(element,type,handler)else if (element.attachevent) else 

} 

1

2 
3 
4 
5 
6 
7 
8 
9 

removehandler：function(element, type, handler) else if (element.detachevent) else 

} 

1

2 
3 
4 
5 
6 
7 

getevent: function(event),

//獲取事件物件目標的相容性寫法
gettarget: function(event)

1

2 
3 
4 
5 
6 
7 

preventdefault: function(event) else 

} 

1

2 
3 
4 
5 
6 
7 

stoppropagation: function(event) else 

} 

1

2 
3 
4 
5 
6 
7 
8 
9 
10 
11 

getrelatedtarget: function(event) else if (event.toelement) else if (event.fromelement) else 

} 

1

2 
3 
4 

document.createevent()

event.initevent()
element.dispatchevent()

**自：stevesouders

瀏覽器相容性

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

瀏覽器相容性

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

瀏覽器相容性

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