瀏覽器的相容性總結

##不同瀏覽器的標籤預設的外補丁和內補丁不同

問題症狀：隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。

解決方案：css裡加 *

備註：幾乎所有的css檔案開頭都會用萬用字元*來設定各個標籤的內外補丁是0。

##塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大（即雙倍邊距bug）

問題症狀：常見症狀是ie6中後面的一塊被頂到下一行

解決方案：在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性

##設定較小高度標籤（一般小於10px），在ie6，ie7，遨遊中高度超出自己設定高度

問題症狀：ie6、7和遨遊裡這個標籤的高度不受控制，超出自己設定的高度

解決方案：給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。

備註：這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是ie8之前的瀏覽器都會給標籤乙個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。

##行內屬性標籤，設定display:block後採用float布局，又有橫行的margin的情況，ie6間距bug

問題症狀：ie6裡的間距比超過設定的間距

解決方案：在display:block;後面加入display:inline;display:table;

備註：行內屬性標籤，為了設定寬高，我們需要設定display:block;(除了input標籤比較特殊)。在用float布局並有橫向的margin後，在ie6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:table。

##預設有間距

問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加了問題一中提到的萬用字元也不起作用。

解決方案：使用float屬性為img布局

備註：因為img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裡，但是部分瀏覽器的img標籤之間會有個間距。使用float是正道。

##標籤最低高度設定min-height不相容

問題症狀：因為min-height本身就是乙個不相容的css屬性，所以設定min-height時不能很好的被各個瀏覽器相容

解決方案：如果我們要設定乙個標籤的最小高度200px，需要進行的設定為：

備註：在b/s系統前端開時，有很多情況下我們又這種需求。當內容小於乙個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。

##一、ie6雙倍邊距bug

例如「margin-left:10px」 在ie6中，該值就會被解析為20px。

解決方案：需要在該元素中加入display:inline 或 display:block 明確其元素型別

##二、ie6中3畫素問題及解決辦法

當元素使用float浮動後，元素與相鄰的元素之間會產生3px的間隙。詭異的是如果右側的容器沒設定高度時3px的間隙在相鄰容器的內部，當設定高度後又跑到容器的相反側了。

解決方案：需要使布局在同一行的元素都加上float浮動。

ie6中奇數的高寬顯示大小與偶數高寬顯示大小存在一定的不同。其中要問題是出在奇數高寬上。

解決方案：需要盡量將外部定位的div高寬寫成偶數即可。

##四、ie6中鏈結的下方有間隙

ie6中的下方會存在一定的間隙，尤其在垂直挨著的時候，即可看到這樣的間隙。

解決方案：需要將img標籤定義為display:block 或定義vertical-align對應的屬性。也可以為img對應的樣式寫入font-size:0

##五、ie6下空元素的高度bug

如果乙個元素中沒有任何內容，當在樣式中為這個元素設定了0-19px之間的高度時。此元素的高度始終為19px。

解決的方法如下:

1.在元素的css中加入：overflow:hidden

2.在元素中插入html注釋：

3.在元素中插入html的空白符： 

4.在元素的css中加入：font-size:0

##六、重複文字的bug

在某些比較複雜的排版中，有時候浮動元素的最後一些字元會出現在clear清除元素的下面。

解決方法如下：

1.確保元素都帶有display:inline

2.在最後乙個元素上使用「margin-right:-3px

3.為浮動元素的最後乙個條目加上條件注釋，***

4.在容器的最後元素使用乙個空白的div，為這個div指定不超過容器的寬度。

##七、ie6中 z-index失效

具體bug為，元素的父級元素設定的z-index為1，那麼其子級元素再設定z-index時會失效，其層級會繼承父級元素的設定，造成某些層級調整上的bug

原因：z-index起作用有個小小前提，就是元素的position屬性要 是relative，absolute或是fixed。

解決方案：

1.position:relative改為position:absolute；

2.去除浮動；

3.浮動元素新增position屬性（如relative，absolute等）。

**ie6結語：實際上中，很多bug的解決方法都可以使用display:inline、font-size:0、float解決。因此我們在書寫**時要記住，一旦使用了float浮動，就為元素增加乙個display:inline樣式，可以有效的避免浮動造成的樣式錯亂問題。使用空div時，為了避免其高度影響布局美觀，也可以為其加上font-size:0 這樣就很容易避免一些相容上的問題。**

##子元素不會繼承透明效果

``` css

.opacity

```##避免使用負的margin和padding

瀏覽器相容性

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

瀏覽器相容性

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

瀏覽器相容性

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