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

Posted 2021-10-28 yuanyiming

 

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。