微信

你不知的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.  
  6.     /* fix the double margin error */ 
  7.     display:inline;  
  8. }

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

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

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

解决方案:JS

  1. /* jQuery Script */  
  2. $('#list li').hover(  
  3.  
  4.     function () {  
  5.         $(this).addClass('color');  
  6.     },  
  7.       
  8.     function() {  
  9.         $(this).removeClass('color');  
  10.     }  
  11. );
  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. }
posted @ 2014-07-21 11:36  Admin_info  阅读(213)  评论(0编辑  收藏  举报
青春时代是一个短暂的美梦,当你醒来时,这早已消失得无影无踪了。
点点Admin_info