浏览器常见的兼容性问题

  有时候编写一段代码，在其他浏览器打开都是正常的，但是在IE6中打开会出现样式错乱，这是因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，也就是浏览器兼容性问题。浏览器兼容性问题会给我们带来很大的困扰，所以我们要解决，下面是常见的几个问题。

一、IE6/IE7对display:inline-block的支持欠缺

问题：用ul和li做的横向菜单，没有用float:left，而是将li设置display:inline-block，在主流浏览器中水平显示都没有问题，可是到ie6/ie7下就成垂直显示了。

解决前：

解决方案：给IE6,IE7的display设为inline

解决后：

二、浏览器默认的margin和padding不同

问题：随便几个标签，浏览器默认的margin和padding都不同

解决前：

解决方案：用*通配符标签来定义margin和padding为0

解决后：

三、图片默认有间距

问题：几个img标签放在一起的时候，有些浏览器会默认有间距

解决前：

解决方案：用float来给img布局

解决后：

四、无法设置微型高度

问题：在IE6中无法设置较小的高度，如下面例子（2px）

解决前：

解决方案：因为IE不允许元件的高度小于字体的高度，所以把字体大小设为0就可以了

解决后：

五、标签最低高度设置min-height不兼容

问题：IE6不能兼容css中的min-heiight属性

解决方案:新的浏览器识别出min-height这个样式，当执行到第二行的时候又有!important，所以第三行不起作用。而在ie6中解析时，它不识别min-height和!important，所以直接就解析第三行height样式，继而间接实现了min-height。同理min-width也可以用这种方法实现

解决后：

六、a标签的display属性

举个例子，看下面代码

期望的结果

IE的结果：

解决方案：给a标签设置一个高度