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