发表新帖
发表新帖

IE6 PNG transparency

前端 未结
关注
12 2060
耶瑟儿～
耶瑟儿～ 2020-11-28 08:26

How can I fix PNG transparency bug in IE6 for background image?

相关标签:
12条回答
  • 滥情空心
    2020-11-28 08:47

    What I'm doing in a project I'm working on is taking a cue from Paul Irish's HTML5 Boilerplate and assigning conditional styles to the entire page. He goes into it in detail here, but briefly, the idea is to add conditional checks in the HTML of every page on your site, applied to the body tag. Like so:

    <!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 pageStyle"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 pageStyle"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9 pageStyle"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->

    IE browsers will read these comments and apply those styles. Other browsers will ignore it. The genius of this is you can design standards compliant websites, use PNGs, whatever. And then, in your CSS, add additional styles placed AFTER your standard styles to give IE browsers what they want. For instance, one style I'm working on uses a PNG background image. To make this play nice in ie6, I COULD use javascript/htc to replace them, apply one of the many hacks out there. OR I could do this:

    .someStyle {
    background: url(/images/someFile.png) no-repeat; 
background-position: -0px -280px;

}

.ie6 .someStyle {
   background: url(/images/someFile.gif) no-repeat; 
background-position: -0px -280px;

}

    By feeding a GIF to my ie6 users, there's no CPU hogging workaround processes, which is actually a very big issue if you've ever tested on the kind of POS machine likely to be running ie6. And, I haven't given up any quality for my nice users with nice browsers.

    It does require two separate files, but I think it's a much cleaner implementation than most. Also, instead of a separate ie6.css file, using .ie6 .whatever keeps your fixes right next the the styles they apply to, which I find cleaner and easier to use. It also encourages you to consider ie6 users as you go, instead of finishing your design and then looking back in horror

    0 讨论(0)
  • 慢半拍i
    2020-11-28 08:47

    This is a great article about this problem. In summary, it provides a JS library called SuperSleight. I have used it in the past with a decent amount of success.

    0 讨论(0)
  • 感动是毒
    2020-11-28 08:51

    I like this Javascript solution writen by David Cilley some time ago. It gets out of the way of compliant browsers and can be used with any back-end you want. It does still require a blank gif image though.

    Add these functions to your HTML Header or other existing .js include: 

    <script type="text/javascript">
    function fixPngs(){
    // Loops through all img tags   
        for (i = 0; i < document.images.length; i++){
            var s = document.images[i].src;
            if (s.indexOf('.png') > 0)  // Checks for the .png extension
                fixPng(s, document.images[i]);
        }
    }

    function fixPng(u, o){
        // u = url of the image
        // o = image object 
        o.src = 'images/spacer.gif';  // Need to give it an image so we don't get the red x
        o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
    }   
</script>

    Put the following conditional comment at the bottom (footer section, just before </body> ): 

    <!--[if lte IE 6]>
    <script language="javascript" type="text/javascript">
        //this is a conditional comment that only IE understands. If a user using IE 6 or lower 
         //views this page, the following code will run. Otherwise, it will appear commented out.
        //it goes after the body tag so it can fire after the page loads.
        fixPngs();
    </script> 
<![endif]-->

    For a more comprehensive approach to IE6 oddities, try the IE7 Javascript library.

    0 讨论(0)
  • 孤街浪徒
    2020-11-28 08:54

    Use PNG Behaviour.

    ie6.css:

    img {
   behavior: url("pngbehavior.htc");
}

    page.html:

    <!--[if IE 6]> 
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
    0 讨论(0)
  • 清酒与你
    2020-11-28 08:55

    For example with Dean Edwards' ie7.js

    0 讨论(0)
  • 天命终不由人
    2020-11-28 08:59

    You could be brave and simply state that your site may not render well on IE6. Perhaps not the most commercially minded approach but we'd do all of ourselves a favor (even Microsoft) if we just let IE6 die. Of course since a large amount of online activity happens on corporate machines with IE6 nailed to them that isn't really going to happen soon. :(

    0 讨论(0)
 看不清?
提交回复
热议问题