IE的bug及其解决方案收集
E令人咬牙切齿的bug不胜枚举,其中IE6更是臭名昭著,令人发指。
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下不显示默认的垂直滚动条
解决方案如下:
- html{
- overflow: auto;
- }