css常見的bug及解決辦法

1、圖片在IE6及以下有邊框
   解決：給img{border：0 none}

2、div插入圖片有間隙
   解決：（1）div{font-size:0}
    （2）img{display：block}

3、雙倍浮向，在IE6及以下版本，浮動的元素，有設置margin，出現
雙倍外邊距。
   解決：給浮動的元素設置display：inline

4、在IE6及以下版本，部分塊級元素擁有默認高度
   解決：設置font-size:0

5、表單元素行高不一樣
   解決：input{float：left}

6、按鈕的大小不一樣
   解決：在input外邊套一層標籤，添加按鈕的樣式，把按鈕的默認
樣式去掉

7、百分比的bug，在IE6及以下版本中，解析的時候四捨五入計算，
50%+50% > 100%,
   解決：把右邊的浮動的元素，clear：right

8、透明屬性
兼容其他瀏覽器寫法：opacity:value;(value的取值範圍0-1;
    例：opacity:0.5;
)
IE瀏覽器寫法：filter:alpha(opacity=value);取值範圍 0-100(整數
)

9、margin塌陷
當前元素(父元素裏面第一個子元素)與父元素沒有設置任何浮動的情
況下，設置margin-top後，會錯誤的把margin-top加在父級元素上，
解決：
    （1）給父級元素添加overflow:hidden;(推薦使用)
    （2）給父元素設置border
    （3）給父元素或者子元素設置float

10、margin合併BUG
當兩個上下排列的元素，上元素有margin-bottom：30px；下面元素有
margin-top:20px；他們中間的距離不會疊加，而是會設置爲較大的值
解決：給兩個元素或者其中一個加上display：inline-block