常见浏览器兼容性问题及解决办法总结(持续更新中...)

1. 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同;

解决办法:在CSS文件开头,加*{margin: 0; padding: 0;},把所有标签的margin和padding设置为0即可。

2. 在IE6中,块元素设置float并且有水平方向的margin时,margin显示出来会比设置的值大,会导致最后一块元素被顶到下面去;

解决办法:可以将块级元素display设置为inline。

3. 在IE6,IE7等浏览器,标签高度小于10px时,实际的高度会超出设置的高度,这是因为浏览器给标签设置了一个默认的最小高度;

解决办法:设置{overflow: hidden;},或者设置line-height小于你设置的高度。

4. 在某些浏览器中,图片有默认的间距(所有有文字属性的标签都会有边距,除非两个标签连在一起没有隔开);

解决办法:使用float为img布局,因为所有标签设置float之后都会变成块级元素,块级元素浮动时会紧挨在一起,没有边距;此外可以让HTML的img标签紧挨在一起,不要隔开,但是会影响HTML文档的结构,不太美观。

5. 标签最低高度设置min-height不兼容问题;

解决办法:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}。

6. IE9以下浏览器不能使用opacity;

解决办法:{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}

7.两个块级元素,父元素设置了overflow:auto,子元素设置了position:relative ,且高度大于父元素,在IE6、IE7会被隐藏而不是溢出;

解决办法:父级元素设置position:relative。

猜你喜欢

转载自www.cnblogs.com/yuanyiming/p/10777138.html