IE兼容性问题的总结

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

1、表现描述

　　这个应该算是很经典的ie兼容性问题了，inline-block作用就是将块级元素以行的等式显示。在主流浏览器中水平显示都没有问题，可是到ie6/ie7下就成垂直显示了。

　　（1）css代码：

#ul-menu{

 　　margin:;

 　　padding:;

 　　list-style:none;

 }

 #ul-menu li{

 　　inline-block;

 　　margin-right:15px;

 }

　　（2）HTML代码：

<ul id="ul-menu">

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

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

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

</ul>

2、解决方法：

#ul-menu li{

　　display:inline-block;

  　 _zoom:;

　　*display:inline;

}

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

1、表现描述：

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

2、解决方法：

html{

　　overflow:auto;

}

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

1、表现描述：

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

2、解决方法：

div{

　　min-height:100px;

　　height: auto !important;

　　height: 100px;

}

四、PNG图片透明

1、表现描述：

　　png的图片在ie6中，透明的部分会显示成灰色。

2、解决方法：

　　增加一个针对png的hack

img{

     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='图片路径', sizingMethod='crop');

}

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

1、表现描述

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

（1）CSS代码：

#test{

　　width:100px;

　　height:100px;

　　background:#ccc;

　　float:left;

　　margin-left:20px;

}

　　（2）HTML代码：

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

2、解决方法：

　　将对应样式增加display:inline属性

#test{

　　width:100px;

　　height:100px;

　　background:#ccc;

　　float:left;

　　margin-left:20px;

　　display:inline;

}

六、IE不能识别margin-top

1、表现描述：

　　顶部一个div，设置margin-top:120px;时，在主流浏览器下显示正常，在IE下没有效果

　　（1）HTML代码：

<body>

    <div class="top"></div>

</body>

　　（2）CSS代码：

.top{

    width: 1000px;

    height: 200px;

    margin-top: 120px;

    border: 1px solid #CCC;

}

2、解决方法：

　　（1）仅是间距的显示，将margin-top换成padding-top即可（需注意padding对其背景的影响）。

.top{

    width: 1000px;

    height: 200px;

    padding-top: 120px;

    border: 1px solid #CCC;

}

　　（2）.使这个块不直接跟在前面的这个绝对定位元素后面，比如在它们之间插入一个空div标签，或者交换这两个标签的前后位置

七、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下不可以。

　　（1）jquery代码：

<script type="text/javascript">

     $(document).ready(function(){

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

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

         });

    })

</script>

　　（2）HTML代码：

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

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

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

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

</select>

2、解决方法：

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

<script type="text/script">

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

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

         alert($opt.text());

    });

</script>

九、IE不能支持CSS3属性nth-child

1、表现描述：

　　设置某一元素的第几个子元素单独的属性时，CSS3提供了nth-child属性，在Google，FireFox等浏览器下正常，但是该属性在IE下无效。

　　（1）HTML代码：

<ul>

    <li>aaa</li>

    <li>bbb</li>

    <li>ccc</li>

</ul>

　　（2）CSS代码：

ul li:first-child {

  background: #CCC;

}

ul li:nth-child(2) {

  background: #EEE;

}

ul li:nth-child(3) {

  background: #AAA;

}

2、解决办法：

用jQuery的属性解决：

$("ul li:nth-child(2)").css("background", "#CCC");

$("ul li:nth-child(3)").css("background", "#CCC");

十、上下margin重合

1、表现描述：

　　上面div设置margin-bottom，下面div设置margin-top。在IE和FireFox下产生了重合

　　（1）HTML代码：

<div class="top">

</div>

<div class="bottom">

</div>

　　（2）CSS代码：

.top {

  width: 100px;

  height: 100px;

  background: #CCC;

  margin-bottom: 50px;

}

.bottom {

  width: 100px;

  height: 100px;

  background: #EEE;

  margin-top: 50px;

}

2、解决方法：

统一使用上方div的margin-bottom或者下方div的margin-top。

十一、div浮动，IE产生3px的bug

1、表现描述：

　　左边对象浮动，右边vaiyong外补丁的左边距来定位，在IE下，右边对象内的文本会离左边有3px的间距。

　　（1）HTML代码：

<div class="box">

    <div class="left"></div>

    <div class="right"></div>

</div>

　　（2）CSS代码：

.box {

    float: left;

    width: 800px;

}

.left {

  float: left;

  width: 50%;

}

.right {

  width: 50%;

}

2、解决方法：

（1）CSS代码中增加这行代码即可：

*html .left {

  margin-right: -3px;

}

十二、IE6无法定义1px高度左右的容器

1、表现描述：

　　定义1px的容器，因为行高，导致IE6下无法定义。

2、解决方法：

overflow: hidden; | zoom: 0.08; | line-height: 1px;

<style>

    <!--

     div {

        background: red;

     }

    -->

</style>