浏览器兼容问题及解决方法

1)将li元素设置display:inline-block属性将块级元素以行的等式显示上面,在主流浏览器中水平显示
都没有问题,可是到ie6/ie7下就成垂直显示了
解决方法:设置 display: inline 属性可以解决问题。

2)随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方法:在CSS里 添加 *{margin:0;padding:0;}

3)IE6/IE7显示垂直滚动条,有时候页面就几个字,根本没有超出显示范围,IE6/IE7还会显示垂直滚动条。

解决方法:将html样式设置overflow属性

4)IE6下浮动时margin双倍边距。比如有一个div,其css为float:left,然后margin-left:20px,在主流浏览器中显示没有问题,但在ie6中则会出现双倍边距,即为40px。

解决方法:在对应的样式中加上display:inline

5)几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

解决方法:使用float属性为img布局

(因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。)

6)标签最低高度设置min-height不兼容,因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

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

(在B/S系统前端开时,有很多情况下我们又这种需求。当内容小于一个值(如300px)时。容器的高度为300px;当内容高度大于这个值时,容器高度被撑高,而不是出现滚动条。这时候我们就会面临这个兼容性问题。)

 

 

原文地址:https://www.cnblogs.com/lulublog/p/7822125.html