你不知的IE的bug及其解决方案
2014-07-21 11:36
288 查看
E令人咬牙切齿的bug不胜枚举,其中IE6更是臭名昭著,令人发指。这里总结出IE下最为严重的5个bug,及其应对方案。
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
主要利用IE滤镜来解决png无法透明的问题。
接下来来看第二种解决方案:js
点此下载
上面是jquery用于解决这个bug的插件,强烈推荐!
float:left;
width:200px;
margin-left:10px;
/* fix the double margin error */
display:inline;
}
原理:关键是 display:inline; ,将其转换为内联元素。
$('#list li').hover(
function () {
$(this).addClass('color');
},
function() {
$(this).removeClass('color');
}
);
/* CSS Style */
.color {
">#f00;
}
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
原理:利用jquery的特殊的hover事件
html {
overflow: auto;
}
1、IE6下无法显示png格式的透明信息
这个bug是众多网页设计师的噩梦,虽然可以采用gif代替,但是gif的表现力实在有限,单是阴影就无法完美显示了,这无疑给网页的表现力下了一个档次。解决方案:
img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
主要利用IE滤镜来解决png无法透明的问题。
接下来来看第二种解决方案:js
点此下载
上面是jquery用于解决这个bug的插件,强烈推荐!
2、IE6下遮罩层无法覆盖选择框
解决这个bug请看我之前写的一篇博文:http://www.36ria.cn/?p=3953、IE6下双倍外边距问题
又是一个令人发指的bug,IE6下设置margin-left或margin-right,居然会自动加倍。解决方案:
div#content {float:left;
width:200px;
margin-left:10px;
/* fix the double margin error */
display:inline;
}
原理:关键是 display:inline; ,将其转换为内联元素。
4、:hover 只支持a,无法应用于其他元素
众所周知,在网页里面鼠标移动切换样式,是个应用非常广泛的功能,可是IE6下只支持链接,其他元素都无法使用:hover。解决方案:JS
/* jQuery Script */$('#list li').hover(
function () {
$(this).addClass('color');
},
function() {
$(this).removeClass('color');
}
);
/* CSS Style */
.color {
">#f00;
}
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
原理:利用jquery的特殊的hover事件
5、IE下不显示默认的垂直滚动条
解决方案如下:html {
overflow: auto;
}
相关文章推荐
- IE的bug及其解决方案收集
- IE6下li中span元素右浮动的BUG解决方案(其他的类似)
- 为Web程序员解毒:9个IE常见Bug的解决方案
- [举一反三]解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari) 前言: 这是一个老bug了,现在提供一个完美解决方案。由于我一直是用createElement来创建动态的op
- [经典]9个最常见IE的Bug及其fix
- IE兼容BUG汇总及解决方案(持续更新)
- CSS控制之IE常见BUG及解决方案
- IE开发者工具 bug解决方案
- Flash在IE全屏时 使用Deeplinking修改网址会退出全屏的bug解决方案
- IE下设置unselectable与onselectstart属性的bug,Firefox与Chrome下的解决方案
- ASP.NET ImageButton/Image 控件关于border的一个诡异的BUG及其解决方案
- IE7下position的z-index Bug解决方案
- IE CSS Bug及解决方案参考手册
- IE8/9的几个前端bug解决方案
- IE6 + Png + Fixpng 之后的Png图片点击时报错Bug及其解决方案
- IE CSS Bug及解决方案参考手册
- IE下设置unselectable与onselectstart属性的bug,Firefox与Chrome下的解决方案
- .Net正式版中的一些Bug及其解决方案
- IE css bug及解决方案参考
- IE css bug及解决方案参考