(1)、不同瀏覽器的標簽默認的外補?。╩argin)和內補丁(padding)不同
問題癥狀:隨便寫幾個標簽,不加樣式控制的情況下,各自的margin和padding差異較大。
解決方法:css里增加通配符*{margin:0;padding:0}
(2)、IE6雙邊距問題:在IE6中設置了float,同時又設置margin,就會出現邊距問題
問題癥狀:常見癥狀是IE6中后面的一塊被頂到下一行。
解決方法:在float的標簽樣式控制中加入display:inline;將其轉化為行內屬性;
(3)、當標簽的高度設置小于10px,在IE6、IE7中會超出自己設置的高度
解決方法:超出高度的標簽設置overflow:hidden或者設置行高line-height的值小于你的設置高度
(4)、圖片默認有間距
問題癥狀:幾個img標簽放在一起的時候,有些瀏覽器會有默認的間距,加了問題一中提到的通配符也不起作用。
解決方法:使用float屬性為img布局
(5)、IE9以下瀏覽器不能使用opacity
解決方法:opacity:0.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.AIpha(style=0,opacity=50);
(6)、邊距重疊問題;當相鄰兩個元素都設置了margin邊距時,margin將取最大值,舍棄最小值;
解決方法:為了不讓邊重疊,可以給子元素增加一個父級元素,并設置父級元素為overflow:hidden;
(7)、cursor:hand顯示手型在Safari上不支持
解決方法:統一使用cursor:pointer
(8)、兩個塊級元素,父元素設置了overflow:auto;子元素設置了position:relative;且高度大于父元素,在IE6,、IE7會被隱藏而不是溢出;
解決方法:父級元素設置position:relative
(9)、行內屬性標簽,設置display:block后采用float布局,又有橫向的margin的情況,IE6間距bug
問題癥狀:IE6里的間距比超過設置的間距
解決方法:在display:block;后面加入display:inline;display:table;
(10)、標簽最低高度設置min-height不兼容
問題癥狀:因為min-height本身就是一個不兼容的css屬性,所以設置min-height時不能很好的被各個瀏覽器兼容
解決方法:如果我們要設置一個標簽的最小高度200px,需要進行的設置為:{min-height:200px;height:auto;!ImportAnt;height:200px;overflow:visible;}