技术 – 第 5 页

CSS设计遇到的IE6-7 FF兼容性问题

直接从自己空间COPY过来的，排版上可能会有点乱。

1.概要
1.所有浏览器通用
height: 100px;
IE6 专用
_height: 100px;
IE6 专用
*height: 100px;
IE7 专用
*+height: 100px;
IE7、FF 共用
height: 100px !important;

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
</style>

注意:*+html 对IE7的兼容必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

2最狠的手段 – !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略
(随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.注意写法.声明位置需要提前.)
<style>
#wrapper {
width: 100px!important;
width: 80px;
}
</style>

3.margin加倍的问题,一个IE6都存在的BUG
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
        display:inline; //使浮动忽略,曾经就在这里出错,摸了半天后脑勺
}

4.另外加上一段IE6对PNG透明支持不好的JS解决代码
function correctPNG()
   {
   for(var i=0; i<document.images.length; i++)
      {
     var img = document.images
     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=”” + “width:” + img.width + “px; height:” + img.height + “px;” + imgStyle + “;”
        + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
       + “(src=’” + img.src + “‘, sizingMethod=’scale’);”></span>”
       img.outerHTML = strNewHTML
       i = i-1
        }
      }
   }
function alphaBackgrounds(){
   var rslt = navigator.appVersion.match(/MSIE (d+.d+)/, ”);
   var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
   for (i=0; i<document.all.length; i++){
      var bg = document.all.currentStyle.backgroundImage;
      if (bg){
         if (bg.match(/.png/i) != null){
            var mypng = bg.substring(5,bg.length-2);
   //alert(mypng);
            document.all.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’”+mypng+“‘, sizingMethod=’crop’)”;
            document.all.style.backgroundImage = “url(”)”;
   //alert(document.all.style.filter);
         }
      }
   }
}
if (navigator.platform == “Win32” && navigator.appName == “Microsoft Internet Explorer” && window.attachEvent) {
window.attachEvent(“onload”, correctPNG);
window.attachEvent(“onload”, alphaBackgrounds);
}

5.只要记住IE7=*，IE6=_，然后按照先Firefox后IE7，最后IE6的顺序进行编写，一般就可以保证大部分用户浏览正常了。