IE浏览器下常见兼容性问题总结

Posted 2020-10-14

 

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外其他浏览器均不支持。