zoukankan      html  css  js  c++  java
  • png图片透明在ie6中显示问题

    png图片透明在ie6浏览器显示存在问题

    解决办法如下:

    第一种情况:背景图片 

    <link href="style.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]>
    <link href="ie6.css" rel="stylesheet" type="text/css" />
    <![endif]
    -->

    style.css

    .pngfix {
            width
    : 100px;
            height
    : 60px;
            background
    : url(logo.png) no-repeat;  
    }

    ie6.css

    html .pngfix {
            background
    : none; 
            width
    : 100px;
            height
    : 60px;
            filter
    :progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='logo.png');
    }

    调用的时候

    <div class="pngfix"></div>


     第二种情况:图片

    在head加上这个js

    <!--[if IE 6]>
    <script type="text/javascript" src="pngfix.js"></script>
    <![endif]
    -->


    pngfix.js

    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])

    function fixPNG(myImage) 
    {
        
    if ((version >= 5.5&& (version < 7&& (document.body.filters)) 
        {
           
    var imgID = (myImage.id) ? "id='" + myImage.id + "" : ""
        
    var imgClass = (myImage.className) ? "class='" + myImage.className + "" : ""
        
    var imgTitle = (myImage.title) ? 
                   
    "title='" + myImage.title  + "" : "title='" + myImage.alt + ""
        
    var imgStyle = "display:inline-block;" + myImage.style.cssText
        
    var strNewHTML = "<span " + imgID + imgClass + imgTitle
                      
    + " style=\"" + "" + myImage.width 
                      + 
    "px; height:" + myImage.height 
                      + 
    "px;" + imgStyle + ";"
                      + 
    "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                      + 
    "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>"
        myImage.outerHTML 
    = strNewHTML   
        }
    }


    调用的时候

    <img src="logo.png" width="100" height="60" alt="logo" onload="fixPNG(this)" />


  • 相关阅读:
    TCP 的那些事儿(下)
    如何获取(GET)一杯咖啡——星巴克REST案例分析
    前端必读:浏览器内部工作原理
    伟大的程序员是怎样炼成的?
    从用户行为打造活动交互设计闭环——2014年世界杯竞猜活动设计总结
    技术普及帖:你刚才在淘宝上买了一件东西
    什么是互联网思维?给你最全面的解释
    程序员生存定律-打造属于自己的稀缺性
    技术人员如何去面试?
    13幅逻辑图,领略杜克大学的经典思维
  • 原文地址:https://www.cnblogs.com/yiwd/p/1708228.html
Copyright © 2011-2022 走看看