概述
本小菜平时主要写后台程序，偶尔也会去写点前端页面，写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下的兼容性问题，也知道还有很多没有碰到，本人技术有限，大家也可以把自己遇到的浏览器问题留言给我，这样我就有机会开拓视野和增长见识，谢谢支持。