E令人咬牙切齿的bug不胜枚举,其中IE6更是臭名昭著,令人发指。这里总结出IE下最为严重的5个bug,及其应对方案。
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=395
3、IE6下双倍外边距问题
又是一个令人发指的bug,IE6下设置margin-left或margin-right,居然会自动加倍。
解决方案:
-
div#content{
-
float:left;
-
width:200px;
-
margin-left:10px;
-
-
/* fixthedoublemarginerror*/
-
display:inline;
- }
原理:关键是 display:inline; ,将其转换为内联元素。
4、:hover 只支持a,无法应用于其他元素
众所周知,在网页里面鼠标移动切换样式,是个应用非常广泛的功能,可是IE6下只支持链接,其他元素都无法使用:hover。
解决方案:JS
-
/* jQuery Script */
-
$('#list li').hover(
-
-
function (){
-
$(this).addClass('color');
-
},
-
-
function() {
-
$(this).removeClass('color');
-
}
-
);
-
/*CSSStyle*/
-
.color {
-
background-color:#f00;
- }
-
<ulid="list">
-
<li>Item 1</li>
-
<li>Item 2</li>
-
<li>Item 3</li>
-
</ul>
原理:利用jquery的特殊的hover事件
5、IE下不显示默认的垂直滚动条
解决方案如下: