前端开发之20110810日之iebug

　　1.png图片设了padding后,图片往padding方向填充容器.

 我之前在编写代码的时候都是在ff里弄的,"8月50洲..."字样是一张图,而那个人物等图像是背景图.设了"8月50洲.."图片的padding-top后在ff下显示正常,

  可是,在做浏览器兼容性测试的时候在ie里看到的又不是那么回事了(ie6,ie7下显示不正常,ie8则和在ff里显示得一样),看下面的图,"8月50洲.."图片竟然按照padding多少填充了.比如,图片height=100px,设了padding-top:30px后,图片的高度自动填充为100+30了.

 　　解决:a.改成按margin来就好了;
 　　　　 b.把滤镜的sizingmethod改为'crop',这样就不会自动填充了,图片的高度=100px,现在还是100px,但是padding属性却不起作用了,把padding改为margin就行了.
　　2.直接对img设padding不行.把img图片放到一个div容器里,对div容器设paddiing就行了.

注意，感谢园友“ 编程、为你执着-努力”的提问，我知道了原来我对img设padding无效，和我所用的一个js文件有关，且是针对*.png图片，不是ie6本来的bug，而是那个js文件的bug，我那个js就是网上很流行的correctPNG.js，原理是给遍历*.png图片，给它们加滤镜。

把代码贴出来，希望和我一样这个js的园友们能看到这个解决方案。

　　

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
{ 
    var arVersion = navigator.appVersion.split("MSIE") 
    var version = parseFloat(arVersion[1]) 
    if ((version >= 5.5) && (document.body.filters)) 
    { 
       for(var j=0; j<document.images.length; j++) 
       { 
          var img = document.images[j] 
          var imgName = img.src.toUpperCase() 
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
          { 
             var imgID = (img.id) ? "id='" + img.id + "' " : "" 
             var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
             var imgStyle = "display:inline-block;" + img.style.cssText 
             if (img.align == "left") imgStyle = "float:left;" + imgStyle 
             if (img.align == "right") imgStyle = "float:right;" + imgStyle 
             if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
             var strNewHTML = "<span " + imgID + imgClass + imgTitle 
             + " style=\"" + "" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
             + "(src=\'" + img.src + "\', sizingMethod='crop');\"></span>" 
             img.outerHTML = strNewHTML 
             j = j-1 
          } 
       } 
    }     
} 
window.attachEvent("onload", correctPNG); 

第二个问题是另一种解决方法是，引入js时加入条件注释，

　　

<!--[if lt IE 7]> 
<script type="text/javascript" src="js/correctPNG.js"></script>
<![endif]-->