各大瀏覽器兼容性問題總結

在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的樣式文件。（好像國內有被牆了，只能FQ了。）
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>