一、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(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>
