閱讀目錄
3. 標准模式（Standards Mode）和怪異模式（Quirks Mode）
那些年我們追過的男孩或者女孩，你還記得嗎？他或者她也許再也不會出現在你的生命中了，但是，我們每天還是會遇到熟悉的再也不能熟悉的那些瀏覽器兼容性Bug。
在總結瀏覽器問題之前，我覺得我們應該掌握目錄中的1~7標題的內容，對后面的問題，我想應該會更明白一些，並且可以避免許多Bug。
1. Web標准以及W3C
Web標准是由萬維網聯盟（W3C）制訂的，WEB標准的產生，網頁內容能被更多的用戶所訪問到，文件下載和頁面顯示速度更快，所有頁面都能提供適合打印的版本，網頁開發人員開發更快捷，代碼更易於維護，提高了搜索引擎的精確性，提高了網站的易用性。
我們需要注意的代碼標准有：
- 標簽必須閉合（如：<br />）
- 小寫元素和屬性名，與HTML不一樣，XHTML大小寫是敏感的
- 標簽都必須合理嵌套（如：<div><span></span></div>）
- 屬性值必須加引號（如：<height="80">）
- CSS樣式表一定要放在<head></head>之間
- 特殊符號用編碼表示（如：小於號(<)，並不是標簽的一部分，需要用編碼<表示。）
- 所有屬性賦值，XHTML規定所有屬性都必須有一個值，沒有值的就重復本身
- 在注釋中不使用--符號
2. 主流瀏覽器的內核
瀏覽器內核主要指的是瀏覽器的渲染引擎，渲染引擎決定了瀏覽器如何加載和顯示網頁的內容以及信息。我們主要用於測試的瀏覽器都有：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聲明，那瀏覽器就按照自己的方式渲染頁面，頁面進入怪異模式。
4. CSS盒模型
如果想要了解詳細解說，請移至：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盒模型
5. 重置瀏覽器樣式
不同的瀏覽器對標簽的默認樣式值不同，所以我們需要有一套樣式表來重置瀏覽器樣式，避免我們寫的網頁在各個瀏覽器中造成的顯示差異。
- http://cssreset.com/，該網站有最流行的CSS重置樣式表，可以根據自己的需求復制。
還有一種標准化方法，跟重置方法有點不一樣，它會使瀏覽器中不一致的地方標准化，而不是重新修改這些地方。
- http://necolas.github.io/normalize.css/，該網站提供了normalize.css的樣式文件。（好像國內有被牆了，只能翻牆了。）
- https://github.com/kristerkari/normalize.scss，可以在該頁面，下載normalize.scss文件。在寫Sass時，無論是normalize.css還是normalize.scss都可以使用，引用到樣式表開頭即可。
6. HTML語義化
HTML語義化就是頁面去掉樣式或者加載失敗的時候能夠讓頁面呈現出清晰的結構。HTML5新增了好多標簽，例如：header、footer、nav、menu、section、article等等，我們單單從字面上理解，就知道標簽的含義。在寫頁面的時候，我們可以直接引用這些標簽，不需要再用沒有任何含義的div標簽了，對於機器可以識別，對於開發人員，很容易明白，這就是HTML語義化。
HTML語義化的好處有：有利於SEO優化，利於被搜索引擎收錄，更便於搜索引擎的爬蟲程序來識別；便於項目的開發及維護，使HTML代碼更具有可讀性，便於其他設備解析。
7. CSS選擇器優先級
掌握選擇器優先級，再也不用!important來到處打補丁。
CSS的基本選擇器：
- id選擇器（用DOM的id申明）
- 類選擇器（用一個樣式類名申明）
- 標簽選擇器（用HTML標簽申明）
- 屬性選擇器（用DOM的屬性申明）
還有一種添加樣式可以在標簽上直接添加，屬於行內樣式。
在這里，我們只做簡單說明，以上面幾種選擇器來排序：行內元素 < id選擇器 < 類選擇器/屬性選擇器 < 標簽選擇器。
我們可以通過百度統計：http://tongji.baidu.com/data/browser/，查看近兩年來，瀏覽器的市場份額，IE的占比還是很大的，其中IE6占了3.45%，在以后IE6的份額會越來越小，如果不是強烈要求兼容IE6，我認為關於IE6的兼容性問題，只做了解就好。
8. 雙外邊距浮動問題
問題出現的瀏覽器：IE6及其更低的版本
問題描述：任何浮動的元素上的外邊距加倍，例如：如果元素設置的外邊距為margin-left: 15px，在瀏覽器里會顯示為margin-left: 30px。
解決方法：將元素的display屬性設置為inline，因為元素為浮動的，所以這么設置不會影響元素在瀏覽器的顯示。
9. 3像素問題
問題出現的瀏覽器：IE6及其更低的版本
問題描述：兩個相鄰的div之間有3個像素的空隙，一個div使用了float，而另一個沒有使用產生的。
解決方法：A. 對另一個div也使用float；
B. 給浮動的div添加屬性margin-right: –3px，但是這樣寫，在其他瀏覽器又會不正常，所以我們需要添加IE6的hack，在屬性margin-right前添加下划線_margin-right: –3px。（IE6以及更低版本的hack，是在屬性前面添加下划線_）
10. IE6不支持min-*
問題出現的瀏覽器：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時，還是會自動延長。
11. IE6不支持png-24透明圖片
問題出現的瀏覽器：IE6及其更低的版本
問題描述：在IE6中，使用png-24透明圖片，不透明。
解決方法：圖片使用gif格式或者png-8格式圖片。
12. IE6不能定義1px左右寬度的容器
問題出現的瀏覽器：IE6
問題描述：創建一個高度為1px的容器，在IE6中沒效果。
解決方法：因為行高line-height在IE6下有默認值，設置ling-height: 1px | overflow: hidden | zoom: 0.08。
13. IE5~8不支持opacity
問題出現的瀏覽器：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*/
14. Firefox點擊鏈接出現的虛線框
問題出現的瀏覽器：Firefox瀏覽器
問題描述：Firefox瀏覽器在點擊鏈接時，會自動在元素周圍添加一個虛線邊框。
解決方法：我們為了和其他瀏覽器保持一致，需要去掉該虛線框，我們可以給a標簽設置outline屬性，如下：
a {outline: none;} a:focus {outline: none;}
15. 外邊距疊加
問題出現的瀏覽器：所有瀏覽器
問題描述：當兩個或者更多垂直外邊距相遇時，它們將形成一個外邊距，這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。
解決方法：這並不是一個瀏覽器Bug，這是CSS的一個特性，如果想要防止這種情況發生，和padding搭配使用。（要根據實際情況來解決，這里只是簡要說明哈~~~）
16. 圖片默認間距
問題出現的瀏覽器：主流瀏覽器都有此問題
問題描述：幾個img標簽排列的時候，瀏覽器都會有默認的間距。
解決方法：為img標簽添加屬性float。
17. 清除浮動
如果容器中有浮動的元素，容器的高度不能自動延長適應內容的高度，使得內容溢出到容器外而影響頁面布局，為了避免這種情況的發生，我們需要用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>
相關鏈接：CSS盒模型（Box Model）