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

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；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。）