那些年我們經常遇到的瀏覽器相容性問題
那些年我們追過的男孩或者女孩，你還記得嗎？他或者她也許再也不會出現在你的生命中了，但是，我們每天還是會遇到熟悉的再也不能熟悉的那些瀏覽器相容性Bug。
在總結瀏覽器問題之前，我覺得我們應該掌握目錄中的1~7標題的內容，對後面的問題，我想應該會更明白一些，並且可以避免許多Bug。
Web標準是由全球資訊網聯盟（W3C）制訂的，WEB標準的產生，網頁內容能被更多的使用者所訪問到，檔案下載和頁面顯示速度更快，所有頁面都能提供適合列印的版本，網頁開發人員開發更快捷，程式碼更易於維護，提高了搜尋引擎的精確性，提高了網站的易用性。
我們需要注意的程式碼標準有：
- 標籤必須閉合（如：<br />）
- 小寫元素和屬性名，與HTML不一樣，XHTML大小寫是敏感的
- 標籤都必須合理巢狀（如：<div><span></span></div>）
- 屬性值必須加引號（如：<height="80">）
- CSS樣式表一定要放在<head></head>之間
- 特殊符號用編碼表示（如：小於號(<)，並不是標籤的一部分，需要用編碼<表示。）
- 所有屬性賦值，XHTML規定所有屬性都必須有一個值，沒有值的就重複本身
- 在註釋中不使用--符號
瀏覽器核心主要指的是瀏覽器的渲染引擎，渲染引擎決定了瀏覽器如何載入和顯示網頁的內容以及資訊。我們主要用於測試的瀏覽器都有：IE、Chrome、Firefox、Safari、Opera、360瀏覽器。
- IE：trident核心（IE核心）
- Firefox：geoko核心，Mozilla自己開發的一套開放原始碼、以C++編寫的渲染引擎。
- Safari：webkit核心，開源的瀏覽器引擎，源自於Linux平臺上的一個引擎，經過Apple公司的修改可以支援Mac與Windows平臺。
- Chrome：Blink核心，Google和Opera Software共同研發。
- Opera：以前是presto核心，現在改為Blink核心。
- 360瀏覽器： 相容模式（trident核心）、極速模式（Blink核心）。
3. 標準模式（Standards Mode）和怪異模式 （Quirks Mode）
在Netscape Navigator和Microsoft Internet Explorer為數不多的瀏覽器盛行時，他們對網頁有不同的實現方式，那個時候的網頁都是針對這兩個瀏覽器寫的。隨著各種瀏覽器的興起，加上Web標準的制定，現在的瀏覽器不能繼續使用以前的頁面了，所以瀏覽器引入了標準模式和怪異模式來解決這一問題。
標準模式就是瀏覽器按照Web標準來渲染頁面；為了解決瀏覽器還是能使用以前寫的頁面，所以怪異模式就產生了。怪異模式在不同的瀏覽器顯示都是不一樣的，因為他們都是按照自己的方式來渲染頁面。
我們知道了標準模式和怪異模式，可是瀏覽器是怎麼選擇模式來渲染頁面的呢？我們經常在頁面的開頭看到<!DOCTYPE>宣告，這是告訴瀏覽器選擇哪個版本的HTML，對於渲染模式的選擇，瀏覽器是根據DTD的宣告。如果網頁中有DTD標準文件的宣告，那瀏覽器會按照標準模式來渲染網頁；如果網頁沒有DTD宣告或者HTML4以下的DTD宣告，那瀏覽器就按照自己的方式渲染頁面，頁面進入怪異模式。
如果想要了解詳細解說，請移至：http://www.cnblogs.com/ylliap/p/6119740.html
盒模型指定元素如何顯示，理解它，對我們的佈局有很大的幫助。盒模型由內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）組成。
盒模型有兩種：IE盒模型（圖1）、標準的W3C盒模型（圖2）。從圖1和圖2就可以看出，IE盒模型的width包括了border、padding、content，而W3C盒模型的width僅限於content。
在CSS3的屬性中，box-sizing可以設定盒模型型別，預設值為content-box，content-box表示W3C盒模型，border-box表示IE盒模型。
圖1. IE盒模型
圖2. W3C盒模型
不同的瀏覽器對標籤的預設樣式值不同，所以我們需要有一套樣式表來重置瀏覽器樣式，避免我們寫的網頁在各個瀏覽器中造成的顯示差異。
- http://cssreset.com/，該網站有最流行的CSS重置樣式表，可以根據自己的需求複製。
還有一種標準化方法，跟重置方法有點不一樣，它會使瀏覽器中不一致的地方標準化，而不是重新修改這些地方。
- http://necolas.github.io/normalize.css/，該網站提供了normalize.css的樣式檔案。（好像國內有被牆了，只能FQ了。）
- https://github.com/kristerkari/normalize.scss，可以在該頁面，下載normalize.scss檔案。在寫Sass時，無論是normalize.css還是normalize.scss都可以使用，引用到樣式表開頭即可。
HTML語義化就是頁面去掉樣式或者載入失敗的時候能夠讓頁面呈現出清晰的結構。HTML5新增了好多標籤，例如：header、footer、nav、menu、section、article等等，我們單單從字面上理解，就知道標籤的含義。在寫頁面的時候，我們可以直接引用這些標籤，不需要再用沒有任何含義的div標籤了，對於機器可以識別，對於開發人員，很容易明白，這就是HTML語義化。
HTML語義化的好處有：有利於SEO優化，利於被搜尋引擎收錄，更便於搜尋引擎的爬蟲程式來識別；便於專案的開發及維護，使HTML程式碼更具有可讀性，便於其他裝置解析。
掌握選擇器優先順序，再也不用!important來到處打補丁。
CSS的基本選擇器：
- id選擇器（用DOM的id申明）
- 類選擇器（用一個樣式類名申明）
- 標籤選擇器（用HTML標籤申明）
- 屬性選擇器（用DOM的屬性申明）
還有一種新增樣式可以在標籤上直接新增，屬於行內樣式。
在這裡，我們只做簡單說明，以上面幾種選擇器來排序：行內元素 < id選擇器 < 類選擇器/屬性選擇器 < 標籤選擇器。
我們可以通過百度統計：http://tongji.baidu.com/data/browser/，檢視近兩年來，瀏覽器的市場份額，IE的佔比還是很大的，其中IE6佔了3.45%，在以後IE6的份額會越來越小，如果不是強烈要求相容IE6，我認為關於IE6的相容性問題，只做瞭解就好。
問題出現的瀏覽器：IE6及其更低的版本
問題描述：任何浮動的元素上的外邊距加倍，例如：如果元素設定的外邊距為margin-left: 15px，在瀏覽器裡會顯示為margin-left: 30px。
解決方法：將元素的display屬性設定為inline，因為元素為浮動的，所以這麼設定不會影響元素在瀏覽器的顯示。
問題出現的瀏覽器：IE6及其更低的版本
問題描述：兩個相鄰的div之間有3個畫素的空隙，一個div使用了float，而另一個沒有使用產生的。
解決方法：A. 對另一個div也使用float；
B. 給浮動的div新增屬性margin-right: –3px，但是這樣寫，在其他瀏覽器又會不正常，所以我們需要新增IE6的hack，在屬性margin-right前新增下劃線_margin-right: –3px。（IE6以及更低版本的hack，是在屬性前面新增下劃線_）
問題出現的瀏覽器：IE6及其更低的版本
問題描述：IE6不支援min-height該屬性。即使定義了元素高度，如果內容超過元素的高度，IE6在解析時，會自動延長元素的高度。
解決方法：利用IE6不識別!important，給元素設定固定高度，並且設定元素高度自動。
height: auto !important;
height: 300px;
min-height: 300px;
因為IE6不識別!important，它值識別到height: 300px，當內容超過300px時，它會自動延長高度。
IE7及其其他瀏覽器都識別!important，雖然定義了height: 300px，但是!important的優先順序最高。所以內容超過300px時，還是會自動延長。
問題出現的瀏覽器：IE6及其更低的版本
問題描述：在IE6中，使用png-24透明圖片，不透明。
解決方法：圖片使用gif格式或者png-8格式圖片。
問題出現的瀏覽器：IE6
問題描述：建立一個高度為1px的容器，在IE6中沒效果。
解決方法：因為行高line-height在IE6下有預設值，設定ling-height: 1px | overflow: hidden | zoom: 0.08。
問題出現的瀏覽器：IE8及其更低的版本
問題描述：IE5~8不支援CSS屬性opacity
解決方法：這時可以另外新增ie濾鏡alpha，如下：
opacity: 0.8;
filter: alpha(opacity = 80); /*for IE5~7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity = 80)"; /*for IE8*/
問題出現的瀏覽器：Firefox瀏覽器
問題描述：Firefox瀏覽器在點選連結時，會自動在元素周圍新增一個虛線邊框。
解決方法：我們為了和其他瀏覽器保持一致，需要去掉該虛線框，我們可以給a標籤設定outline屬性，如下：
a {outline: none;}
a:focus {outline: none;}
問題出現的瀏覽器：所有瀏覽器
問題描述：當兩個或者更多垂直外邊距相遇時，它們將形成一個外邊距，這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。
解決方法：這並不是一個瀏覽器Bug，這是CSS的一個特性，如果想要防止這種情況發生，和padding搭配使用。（要根據實際情況來解決，這裡只是簡要說明哈~~~）
問題出現的瀏覽器：主流瀏覽器都有此問題
問題描述：幾個img標籤排列的時候，瀏覽器都會有預設的間距。
解決方法：為img標籤新增屬性float。
如果容器中有浮動的元素，容器的高度不能自動延長適應內容的高度，使得內容溢位到容器外而影響頁面佈局，為了避免這種情況的發生，我們需要用CSS來清除元素的浮動。
一般常用的方法有三種：
A. 在浮動元素後面新增帶有clear屬性的空元素
<div>
<div style="float: left;">left</div>
<div style="float: right;">right</div>
<div style="clear: both;"></div>
</div>
B. 給容器新增屬性overflow: hidden或者overflow: auto，在IE6中還需觸發haslayout，所以還需新增zoom: 1。
<div style="overflow: auto;*zoom: 1;">
<div style="float: left;">left</div>
<div style="float: right;">right</div>
</div>
C. 使用:after偽元素
<style>
.clearfix {*zoom: 1;}
.clearfix:after {content: ".";display: block;height: 0;visibility: hidden;clear: both;}
</style>
<div class="clearfix">
<div style="float: left;">left</div>
<div style="float: right;">right</div>
</div>