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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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外其他浏览器均不支持。

 




















以上是关于IE浏览器下常见兼容性问题总结的主要内容,如果未能解决你的问题,请参考以下文章

兼容ie8,firefox,chrome浏览器的代码片段

IE6 浏览器常见兼容问题 大汇总(23个)

IE浏览器兼容问题(下)——IE6的常见问题

IE6 浏览器常见兼容问题 大汇总(23个)

CSS浏览器兼容问题总结

IE与其他浏览器兼容性问题总结