你不知的IE的bug及其解决方案

E令人咬牙切齿的bug不胜枚举，其中IE6更是臭名昭著，令人发指。这里总结出IE下最为严重的5个bug，及其应对方案。

1、IE6下无法显示png格式的透明信息

这个bug是众多网页设计师的噩梦，虽然可以采用gif代替，但是gif的表现力实在有限，单是阴影就无法完美显示了，这无疑给网页的表现力下了一个档次。

解决方案：

1. img {
2. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
3. }

主要利用IE滤镜来解决png无法透明的问题。
接下来来看第二种解决方案：js
点此下载
上面是jquery用于解决这个bug的插件，强烈推荐！

2、IE6下遮罩层无法覆盖选择框

解决这个bug请看我之前写的一篇博文：http://www.36ria.cn/?p=395

3、IE6下双倍外边距问题

又是一个令人发指的bug，IE6下设置margin-left或margin-right，居然会自动加倍。

解决方案：

1. div#content {
2. float:left;
3. width:200px;
4. margin-left:10px;
5. /* fix the double margin error */
6. display:inline;
7. }

原理：关键是 display:inline; ，将其转换为内联元素。

4、:hover 只支持a，无法应用于其他元素

众所周知，在网页里面鼠标移动切换样式，是个应用非常广泛的功能，可是IE6下只支持链接，其他元素都无法使用:hover。

解决方案：JS

1. /* jQuery Script */
2. $('#list li').hover(
3. function () {
4. $(this).addClass('color');
5. },
6. function() {
7. $(this).removeClass('color');
8. }
9. );

1. /* CSS Style */
2. .color {
3. ">#f00;
4. }

1. <ul id="list">
2. <li>Item 1</li>
3. <li>Item 2</li>
4. <li>Item 3</li>
5. </ul>

原理：利用jquery的特殊的hover事件

5、IE下不显示默认的垂直滚动条

解决方案如下：

1. html {
2. overflow: auto;
3. }