(1)、不同浏览器的标签默认的外补丁(margin)和内补丁(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;}