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