有时候编写一段代码,在其他浏览器打开都是正常的,但是在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标签设置一个高度