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代码：

1 #ul-menu{

2 　　margin:0;

3 　　padding:0;

4 　　list-style:none;

5 }

6 #ul-menu li{

7 　　inline-block;

8 　　margin-right:15px;

9 }

html代码：

1  <ul id="ul-menu">

2      <li><a href="#">首页</a></li>

3      <li><a href="#">公司介绍</a></li>

4      <li><a href="#">联系我们</a></li>

5 </ul>

主流浏览器中显示正常：

ie6/ie7下垂直显示：

2）解决方法

1 #ul-menu li{

2 　　display:inline-block;

3  　　_zoom:1;

4 　　*display:inline;

5 }

  

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

1）表现描述

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

1      var str = "apple";

2      console.log(str[0]);//ie7中输出为undefined

2）解决方法

1 var str="apple";

2 console.log(str.charAt(1));//输出a

3 console.log(str.substring(0,1));//输出a

4 console.log(str.slice(0,1));//输出a

 

三、IE下option的onclick事件绑定

1）表现描述

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

jquery代码：

1   <script type="text/javascript">

2      $(document).ready(function(){

3           $("#selFruit option").click(function(){

4                alert($(this).text());

5           });

6    });

html代码：

1 <select id="selFruit " multiple=”multiple”>

2      <option value="0">apple</option>

3      <option value="1">orange</option>

4      <option value="2">banana</option>

5 </select>

主流浏览器中显示：

ie点击下没有反应：

2）解决方法

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

1     $("#selFruit").click(function(){

2          var $opt =$(this).find('option:selected');

3          alert($opt.text());

4     });

ie下显示：

 

 

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

1）表现描述

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

css代码:

1 #test{

2 　　width:100px;

3 　　height:100px;

4 　　background:#ccc;

5 　　float:left;

6 　　margin-left:20px;

7 }

html代码：

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

主流浏览器中显示：

ie6中显示：

 

2）解决方法

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

1 #test{

2 　　width:100px;

3 　　height:100px;

4 　　background:#ccc;

5 　　float:left;

6 　　margin-left:20px;

7 　　display:inline;

8 }

 

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

1）表现描述

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

2）解决方法

这个方法是从网上看到的

1 div{

2 　　min-height:100px;

3 　　height: auto !important;

4 　　height: 100px;

5 }

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

1 div{

2 　　min-width:100px;

3 　　width: auto !important;

4　　 width: 100px;

5 }

 

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

1）表现描述

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

2）解决方法

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

1 html{

2 　　overflow:auto;

3 }

 

七、PNG图片透明

1）表现描述

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

2）解决方法

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

1 img {  

2     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);  

3 }

总结

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