IE浏览器下常见兼容性问题总结
1:IE6/IE7对display:inline-block的不支持
html :
<ul>
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">新闻资讯</a></li>
<li><a href="">案例展示</a></li>
<li><a href="">今日热点</a></li>
</ul>
css样式:
ul li {
display: inline-block;
list-style: none;
}
在IE6/IE7下垂直显示
解决方法:
ul li {
display: inline-block;
margin:10px;
list-style: none;
_display:inline;
}
2:IE6下浮动时margin双倍边距
比如有一个div,其css为float:left,然后margin-left:20px,
在主流浏览器中显示为,但在IE6中则会出现双倍边距,即为40px
。
解决方法:在对应的样式中加 "_display: inline;"
3:IE6不支持css min-width与min-height
设置min-height和min-width IE浏览器忽略了min-height和min-width
解决方法:
.test{ min-height:100px; height: auto !important; height: 100px; }
同理min-width也可以用这种方法实现
4. 无法设置微型高度
在IE中使用 height: XXpx 这样的属性无法设置比较小的高度。
比如有一个div,将高设为height:2px;
在主流浏览器中显示为
在IE浏览器中显示为
解决方法:在样式中加 overflow: hidden 。
5: 文字大小不兼容
同样14px的宋体字,IE下实际占高16px,下留白3px,firefox下实际占高17px,上留白1px,下留白3px。
文字大小不兼容解决方案: 给所有文字设定通用line-height值
6:图片默认有间距
解决方案:给img设定 display:block。
总结:* 或 # ,IE7、IE11 支持。
\9 ,IE8、IE9、IE11 支持。
\0 ,IE8、IE9, IE10 支持。
*、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。