html5多終端瀏覽器相容

什麼是多終端?

多終端就是包括了我們的電腦，手機，手持式移動裝置比如ipad等。

因為各類裝置的顯示螢幕大小不一，解析度不一，最佳可視效果的橫豎設定也不一樣，所以多終端瀏覽器相容主要就是學習如何讓我們的專案在多終端上呈現相同的顯示效果，它主要涉及到兩塊知識點。

1、瀏覽器相容

2、寬高自適應

一、瀏覽器相容

（一）什麼是瀏覽器相容?

在我們的實際開發中會涉及到在多個瀏覽器比如firefox，opera，chrome，或者IE的多個版本下進行除錯，在不同版本瀏覽器下會出現顯示效果不一的情況，而瀏覽器相容就是為了處理這種情況。

瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過我們一般習慣將之稱為“瀏覽器核心”。負責對網頁語法的解釋(如標準通用標記語言下的一個應用HTML、JavaScript)並渲染(顯示)網頁。 所以，通常所謂的瀏覽器核心也就是瀏覽器所採用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網頁的內容以及頁面的格式資訊。不同的瀏覽器核心對網頁編寫語法的解釋也有不同，因此同一網頁在不同的核心的瀏覽器裡的渲染(顯示)效果也可能不同，這也是網頁編寫者需要在不同核心的瀏覽器中測試網頁顯示效果的原因。

主要瀏覽器核心有哪些?

1、Trident核心代表產品Internet Explorer，又稱其為IE核心。Trident(又稱為MSHTML)，是微軟開發的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE、傲遊、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

2、Gecko核心代表作品Mozilla FirefoxGecko是一套開放原始碼的、以C++編寫的網頁排版引擎。Gecko是最流行的排版引擎之一，僅次於Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。

3、WebKit核心代表作品Safari、Chromewebkit 是一個開源專案，包含了來自KDE專案和蘋果公司的一些元件，主要用於Mac OS系統，它的特點在於原始碼結構清晰、渲染速度極快。缺點是對網頁程式碼的相容性不高，導致一些編寫不標準的網頁無法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。

4、Presto核心代表作品OperaPresto是由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨著DOM及Script語法的事件而重新排版。

5、Blink由Google和Opera Software開發的瀏覽器排版引擎，2013年4月釋出。

CSS Bug、CSS Hack和Filter

CSS Bug：CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.

CSS Hack：CSS中，Hack是指一種相容CSS在不同瀏覽器中正確顯示的技巧方法，因為它們都屬於個人對CSS程式碼的非官方的修改，或非官方的補丁。有些人更喜歡使用patch(補丁)來描述這種行為。

Filter：表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或宣告的方法。本質上講，Filter是一種用來過濾不同瀏覽器的Hack型別。

常見CSS解析Bug及hack

圖片間隙：主要解決插入圖片之後在圖片下方多出3畫素的問題

雙倍浮向：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊界加倍顯示。

預設高度：在IE6及以下版本中，部分塊元素擁有預設高度。

表單元素行高不一致：單元素行高對齊方式不一致。

按鈕元素預設大小不一：各瀏覽器中按鈕元素大小不一致。

百分比bug：在IE6及以下版本中在解析百分比時，會按四捨五入方式計算從而導致50%加50%大於100%的情況。

滑鼠指標bug：cursor屬性的hand屬性值只有IE瀏覽器識別，其它瀏覽器不識別該宣告，cursor屬性的pointer屬性值IE6.0以上版本及其它核心瀏覽器都識別該宣告。

透明屬性：IE低版本瀏覽器只能使用filter設定透明度，IE高版本瀏覽器及其他瀏覽器要用opacity來設定。

（二）過濾器(filter)

1、下劃線過濾器

當在一個屬性前面增加了一個下劃線後，由於符合標準的瀏覽器不能識別帶有下劃線的屬性而忽略了這個宣告，但是在IE6及更低版本瀏覽器中會繼續解析這個規則。

2、!important關鍵字過濾器

它表示所附加的宣告具有最高優先順序的意思。但由於IE6及更低版本不能識別它，我們可以利用IE6的這個Bug作為過濾器來相容IE6和其它標準瀏覽器。

3、*屬性過濾器

當在一個屬性前面增加了*後，該屬性只能被IE7瀏覽器識別，其它瀏覽器混略該屬性的作用。

二、寬高自適應

什麼是寬高自適應?

我們的專案需要在多終端上顯示，那麼大家就會發現電腦顯示器，手機螢幕，平板等，它們的解析度都不同。我們不可能為了單一顯示而專門做一套規則，而是需要我們制定地規則能適應各種裝置的顯示，這就涉及到寬高能自動適配我們裝置的螢幕解析度，這就是寬高自適應。

1、寬度自適應

2、元素具備最小高度的自適應

3、高度自適應