一些常見的浏覽器相容性問題

概念：不同的浏覽器對同一段代碼解析不同造成浏覽器顯示效果不同，我們把這樣的問題叫做浏覽器相容性問題

1.雙倍浮動的bug

描述：塊元素float後，又設定了橫向的margin值，在IE6下顯示的margin值比設定的值要大，并且是2倍關系
解決方案：給float的塊元素添加display:inline;
           

2.表單元素行高不一緻

解決方案：
a) 給表單元素添加一緻的vertical-align屬性值
b) 給表單元素添加一緻的float屬性值
           

3.在IE6中，不能識别較小高度的容器(一般為20px)

解決方案：元素{height:1px; overflow:hidden;}
           

4.a标簽裡嵌套img時，有些浏覽器(例如IE浏覽器)下會出現有顔色的邊框

解決方案：  img{border:0;}  或  img{border:none;}
           

5.在IE6中不能識别min-height屬性

解決方案： min-height:100px;  _height:100px;
           

6.圖檔預設有空隙

解決方案：
a) img{display:block;}
b) img{float:left;}
c) img{vertical-align:bottom;}
           

7.IE8及以下浏覽器不能識别opacity屬性

解決方案：
元素{
opacity:0.5;
filter:alpha(opacity=50);
}
           

8.滑鼠指針bug

描述：cursor:hand;隻有IE8及以下浏覽器識别，其他浏覽器不識别
解決方案：
設定為 cursor:pointer;  所有浏覽器都識别，将滑鼠指針設定為手的形狀
           

9.百分比bug

描述：在IE6下，子元素百分之五十加百分之五十大于父元素設定的百分之百
解決方案： 給右邊左浮動的元素添加clear:right;
           

10.上下margin重疊問題

描述：給上下兩個元素同時設定了margin-bottom和margin-top，此時較小的那個值會被重疊。
解決方案：給其中一個元素外層嵌套一個盒子，并設定overflow-hidden；觸發BFC，給裡面的元素建立一個塊級格式化上下文，裡面元素的margin值便可以正常顯示。
           

11.假傳聖旨

描述：給子元素設定的margin值傳遞給了父元素
解決方案：
a)将設定的margin改為padding
b)給父元素設定overflow：hidden；或者float：left；觸發BFC
c)給父元素設定1px的透明邊框，即：
父元素{border-top:1px solid transparent;}