Question

我已经使用http://www.dillerdesign.com/experiment/DD_belatedPNG/一段时间了，它解决了我的大部分IE6问题。

我想知道，是否有一种自动化方法，以便我没有使用class =“png”丢弃我的代码，或者使用背景图像将html元素的id添加到JS文件中。 - 我真的不在乎这会降低IE6的速度 - 向客户解释一下，由于他们的浏览器，网站速度慢，而不是解释为什么一切都有灰色背景！

我不是真正的JS专家，但我想抓住src属性并将文件名添加到类中并不困难。 - 以某种方式解析CSS并添加包含元素的id听起来很难，如果不是不可能的话??

Answer 1

这未经过测试，但这是我的jQuery解决方案，应该可行。它基本上检查所有img元素的.png扩展名，然后检查除了img之外的所有元素，以获得扩展名为.png的背景图像

您可能需要添加额外的代码来检查CSS背景属性以及背景图像。使用body *选择器，我会想象在包含大量元素的页面上有很多开销，但我和你在一起，我不在乎IE6用户加载页面需要多长时间，如果他们不关心更新他们的浏览器

$(function() {
    $('img').each(function() {
            if(this.src.split('.').pop() == 'png') {
                    DD_belatedPNG.fixPng(this)
            }
    });
    $('body *:not(img)').each(function() {
            if($(this).css('background-image').split('.').pop().replace(/("|\')\)/,'') == 'png') {
                    DD_belatedPNG.fixPng(this);
            }
    });
});

编辑：我发现这是一个非常有趣的挑战，因此编写了一个纯JavaScript解决方案。它需要在DOM准备就绪时运行，所以如果你真的不想使用jQuery或其他具有DOM就绪功能的框架，你将不得不使用Dean Edwards的方法，如下所示：

document.write('<script type="text/javascript" id="domready" defer="defer" src="javascript:void(0)"><\/script>');
document.getElementById("domready").onreadystatechange = function() {
    if (this.readyState == "complete") {
        var imgs = document.getElementsByTagName('img')
        for(i=0; i < imgs.length; i++) {
            if(imgs[i].src.toLowerCase().search(/\.png$/) != -1) {
                DD_belatedPNG.fixPng(imgs[i]);
            }
        }

        var children = document.body.getElementsByTagName('*');
        for(i=0; i < children.length; i++) {
            var bg = children[i].currentStyle.backgroundImage;
            if(bg != 'none' && bg.toLowerCase().search(/\.png("|\')?\)$/) != -1) {
                DD_belatedPNG.fixPng(children[i]);
            }
        }
    }
}

自动DD Belated png脚本

1 个答案: