一、IE6/IE7对display:inline-block的支持欠缺
1、表现描述
这个应该算是很经典的ie兼容性问题了，inline-block作用就是将块级元素以行的等式显示。在主流浏览器中水平显示都没有问题，可是到ie6/ie7下就成垂直显示了。
（1）css代码：
#ul-menu{ margin:0; padding:0; 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:1; *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(...); }
五、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>
