IE下常见兼容性问题总结

概述

本小菜平时主要写后台程序，偶尔也会去写点前端页面，写html、css、js的时候，会同时开着ie6、ie7、ie8、ie9、chrome、firefox等浏览器进行页面测试，和大部分前端开发一样，经常被ie折磨，下面就总结一些常见的浏览器兼容性问题，放一起方便自己总结学习，我知道这类型文章，很多大牛都总结过，且写的特别专业。不过我写的都是自己最近碰到的，本人技术一般，也希望各位多加指点。

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

1）表现描述

这个应该算是很经典的ie兼容性问题了，inline-block作用就是将块级元素以行的等式显示。曾经有一个前端美女问我一个问题，是一个用ul和li做的横向菜单，她没有用float:left，而是将li设置display:inline-block，在主流浏览器中水平显示都没有问题，可是到ie6/ie7下就成垂直显示了。

css代码：

 #ul-menu{
 　　;
 　　;
 　　list-style:none;
 }
 #ul-menu li{
 　　inline-block;
 　　margin-right:15px;
 }

html代码：

  <ul id="ul-menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">公司介绍</a></li>
      <li><a href="#">联系我们</a></li>
 </ul>

主流浏览器中显示正常：

ie6/ie7下垂直显示：

2）解决方法

 #ul-menu li{
 　　display:inline-block;
 ;
 　　*display:inline;
 }

二、IE7不能按数组下标的方式读取字符串的字符

1）表现描述

写js代码时，用数组下标的方式访问一个字符串的字符时，在ie7下得到值的为undefined，代码如下：

      var str = "apple";
      console.log(str[0]);//ie7中输出为undefined

2）解决方法

 var str="apple";
 console.log(str.charAt(1));//输出a
 console.log(str.substring(0,1));//输出a
 console.log(str.slice(0,1));//输出a

三、IE下option的onclick事件绑定

1）表现描述

有这样一个需求，用select做的list列表，option充当列表项，当点击option的时候显示这个option的文本，这个在chrome、firefox中直接绑定option的单击事件就可以实现，但ie下不可以。

jquery代码：

   <script type="text/javascript">
      $(document).ready(function(){
           $("#selFruit option").click(function(){
                alert($(this).text());
           });
    });

html代码：

 <select id="selFruit " multiple=”multiple”>
      <option value="0">apple</option>
      <option value="1">orange</option>
      <option value="2">banana</option>
 </select>

主流浏览器中显示：

ie点击下没有反应：

2）解决方法

可以先找到选中的（:selected）option对象，再操作这个对象，这种方法浏览器都支持，代码如下：

     $("#selFruit").click(function(){
          var $opt =$(this).find('option:selected');
          alert($opt.text());
     });

ie下显示：

四、IE6下浮动时margin双倍边距

1）表现描述

比如有一个div，其css为float:left，然后margin-left:20px,在主流浏览器中显示没有问题，但在ie6中则会出现双倍边距，即为40px。

css代码:

 #test{
 　　width:100px;
 　　height:100px;
 　　background:#ccc;
 　　float:left;
 　　margin-left:20px;
 }

html代码：

 <div id="test"></div>

主流浏览器中显示：

ie6中显示：

2）解决方法

在对应的样式中加上display:inline，代码如下：

 #test{
 　　width:100px;
 　　height:100px;
 　　background:#ccc;
 　　float:left;
 　　margin-left:20px;
 　　display:inline;
 }

五、IE6不支持css min-width与min-height

1）表现描述

有时候想让一个div最小高度为100px，但ie6中识别min-height，真心的不识别。

2）解决方法

这个方法是从网上看到的

 div{
 　　min-height:100px;
 　　height: auto !important;
 　　height: 100px;
 }

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

 div{
 　　min-width:100px;
 　　width: auto !important;
4　　 width: 100px;
 }

六、IE6/IE7显示垂直滚动条

1）表现描述

有时候页面就几个字，根本没有超出显示范围，IE6/IE7还会显示垂直滚动条。

2）解决方法

将html样式设置overflow属性，代码如下：

 html{
 　　overflow:auto;
 }

七、PNG图片透明

1）表现描述

这个相信大家都遇到过，png的图片在ie6中，透明的部分会显示成灰色，非常的难看。

2）解决方法

方法是网上找的，是一个争对png的hack，代码如下：

 img {
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
 }

总结

上面写的是平时遇到但被解决掉的几个ie下的兼容性问题，也知道还有很多没有碰到，本人技术有限，大家也可以把自己遇到的浏览器问题留言给我，这样我就有机会开拓视野和增长见识，谢谢支持。