常見的瀏覽器兼容性問題一

1 ie6.0橫向margin加倍

產生因素：塊屬性、float、有橫向margin。
解決方法：display：inline；（mac電腦沒有ie6沒辦法放結果圖，以後補上）

2 ie6.0下默認有行高

解決方法：overflow:hidden;或font-size:0;或line-height：xx px；

3 在各個瀏覽器下img有空隙(原因是：回車。)

解決方法:讓圖片浮動。或者讓圖片img父級元素的font-size:0

4 一個父標籤與幾個子標籤嵌套，父標籤不浮動，子標籤float，子標籤不撐開父的高度。

解決方法：a 在子標籤最後清浮動{

 

}
b 父標籤添加{overflow：hidden；}
c 給父標籤設置高度

5 Ie6下，不識別最大寬、高度和最小寬高度，意即min-width/height和 Max-width/height在ie6中沒效果

解決方法：

(1)：
.abc {
      border: 1px blue solid;
      width: 200px;
      height: 200px;
    }
    html>body .abc {
      width: auto;
      height: auto;
      min-width: 200px;
      min-height: 200px;
    }
(2)：
.abc {
      width: 200px;
      height: 200px;
      _width: 200px;
      _height: 200px;
    }
            （因爲ie6有一個特徵，當定義一個高度時，如果內容超過高度，元素會自動調整高度。）

6 Ie6裏面：如li設寬、高，並且li裏面的標籤浮動，那麼li之間會有間距

解決方法：li不設寬、高或者li內的標籤不浮動

7 li之間有間距

解決方法：li 設置vertical-align:middle;

8 3像素問題：ie6下，當浮動元素與流動元素並列顯示時，他們之間會存在三像素問題.

解決方法：用hack技術， 例如：所有瀏覽器通用 height:100px;
ie6專用_height:100px;
ie7專用*+height:100px;
ie6/ie7共用*height:100px;

9 當定義行內元素爲包含框時，且包含框包含的絕對定位元素以百分比爲單位進行定位時，會出現混亂。

解決方法：在行內元素里加入{zoom：1；}

兩個塊元素，豎向的margin值不增加，會重疊，其間距爲最大margin值。(BFC問題)

解決方法：生成bfc塊

z-index不起作用的 bug

1）ie6下 首先講講第一種z-index無論設置多高都不起作用情況。這種情況發生的條件有三個：1、父標籤position屬性爲relative；2、問題標籤含有浮動(float)屬性。
2）所有瀏覽器：它只認第一個爸爸
層級的高低不僅要看自己，還要看自己的老爸這個後臺是否夠硬。用術語具體描述爲：
父標籤position屬性爲relative或absolute時，子標籤的absolute屬性是相對於父標籤而言的。而在IE6下，層級的表現有時候不是看子標籤的z-index多高，而要看它們的父標籤的z-index誰高誰低。

ie各個版本hack

/類內部hack：/ .header {_width:100px;} /* IE6專用*/ .header {+width:100px;} / IE7專用*/ .header {width:100px;} / IE6、IE7共用*/ .header {width:100px\0;} /* IE8、IE9共用*/ .header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/ .header {width:330px\9\0;} /* IE9專用*/ /選擇器Hack：/ *html .header{} /IE6/ *+html .header{} /IE7/