Javascript PNG修复新元素_Javascript_Jquery_Png_Iepngfix

Javascript PNG修复新元素

javascript jquery

Javascript PNG修复新元素,javascript,jquery,png,iepngfix,Javascript,Jquery,Png,Iepngfix,我正在使用IE6的PNG修复程序我注意到，当我克隆一个元素时，克隆的PNG是未修复的，即使它们附加了正确的类，我也无法重新应用修复。我正在使用jquery来克隆一个元素，由于种种原因，我不得不使用clone（false，false）…有没有一种方法可以在附加克隆后将修复应用于新元素？再次调用DD_belatedPNG.fix（“.pngfix”）似乎不起作用。此解决方案适用于img元素 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

我正在使用IE6的PNG修复程序

我注意到，当我克隆一个元素时，克隆的PNG是未修复的，即使它们附加了正确的类，我也无法重新应用修复。我正在使用jquery来克隆一个元素，由于种种原因，我不得不使用clone（false，false）…有没有一种方法可以在附加克隆后将修复应用于新元素？再次调用DD_belatedPNG.fix（“.pngfix”）似乎不起作用。

此解决方案适用于img元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    body {
        background:#0000FF;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
    $(document).ready(function () {
        function imageClickHandler () {
            var $newA = $("<a></a>")
            var $newImg = $(this).find('img').clone(false,false);
            $newImg.attr("style","");
            $newA.append($newImg);

            $newA.click(imageClickHandler);
            $(this).parent().append($newA);
            DD_belatedPNG.fix('img');
        }

        DD_belatedPNG.fix('img');
        $('a').click(imageClickHandler);

    });
</script>
</head>
<body>
<a><img src="image.png" /></a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
            background:#0000FF;
        }

        a {
            display:inline-block;
            //display:inline;
            zoom:1;
            width:512px;
            height:512px;
            background:url(image.png) no-repeat center center;
            text-decoration:none;
            outline:none;
        }
    </style>
    <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
    <script>
        $(document).ready(function () {
            function imageClickHandler () {
                var $newA = $(this).clone(false,false);
                $newA.removeAttr("style isImg vmlInitiated vmlBg");
                $newA.click(imageClickHandler);
                $(this).parent().append($newA);
                DD_belatedPNG.fix('a');
            }

            DD_belatedPNG.fix('a');
            $('a').click(imageClickHandler);

        });
    </script>
</head>
<body>
    <a></a>
</body>
</html>


身体{
背景：#0000FF；
}
$（文档）.ready（函数（）{
函数imageClickHandler（）{
变量$newA=$（“”）
var$newImg=$（this）.find（'img'）.clone（false，false）；
$newImg.attr（“样式”，“样式”）；
$newA.append（$newImg）；
$newA.click（imageClickHandler）；
$（this.parent（）.append（$newA）；
DD_latedpng.fix（'img'）；
}
DD_latedpng.fix（'img'）；
$（'a'）。单击（imageClickHandler）；
});

编辑此解决方案适用于bg元件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    body {
        background:#0000FF;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
    $(document).ready(function () {
        function imageClickHandler () {
            var $newA = $("<a></a>")
            var $newImg = $(this).find('img').clone(false,false);
            $newImg.attr("style","");
            $newA.append($newImg);

            $newA.click(imageClickHandler);
            $(this).parent().append($newA);
            DD_belatedPNG.fix('img');
        }

        DD_belatedPNG.fix('img');
        $('a').click(imageClickHandler);

    });
</script>
</head>
<body>
<a><img src="image.png" /></a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
            background:#0000FF;
        }

        a {
            display:inline-block;
            //display:inline;
            zoom:1;
            width:512px;
            height:512px;
            background:url(image.png) no-repeat center center;
            text-decoration:none;
            outline:none;
        }
    </style>
    <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
    <script>
        $(document).ready(function () {
            function imageClickHandler () {
                var $newA = $(this).clone(false,false);
                $newA.removeAttr("style isImg vmlInitiated vmlBg");
                $newA.click(imageClickHandler);
                $(this).parent().append($newA);
                DD_belatedPNG.fix('a');
            }

            DD_belatedPNG.fix('a');
            $('a').click(imageClickHandler);

        });
    </script>
</head>
<body>
    <a></a>
</body>
</html>


身体{
背景：#0000FF；
}
a{
显示：内联块；
//显示：内联；
缩放：1；
宽度：512px；
高度：512px；
背景：url（image.png）无重复中心；
文字装饰：无；
大纲：无；
}
$（文档）.ready（函数（）{
函数imageClickHandler（）{
var$newA=$（this）.clone（false，false）；
$newA.removeAttr（“样式isImg vmlInitiated vmlBg”）；
$newA.click（imageClickHandler）；
$（this.parent（）.append（$newA）；
DD_latedpng.fix（'a'）；
}
DD_latedpng.fix（'a'）；
$（'a'）。单击（imageClickHandler）；
});

此解决方案适用于img元件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    body {
        background:#0000FF;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
    $(document).ready(function () {
        function imageClickHandler () {
            var $newA = $("<a></a>")
            var $newImg = $(this).find('img').clone(false,false);
            $newImg.attr("style","");
            $newA.append($newImg);

            $newA.click(imageClickHandler);
            $(this).parent().append($newA);
            DD_belatedPNG.fix('img');
        }

        DD_belatedPNG.fix('img');
        $('a').click(imageClickHandler);

    });
</script>
</head>
<body>
<a><img src="image.png" /></a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
            background:#0000FF;
        }

        a {
            display:inline-block;
            //display:inline;
            zoom:1;
            width:512px;
            height:512px;
            background:url(image.png) no-repeat center center;
            text-decoration:none;
            outline:none;
        }
    </style>
    <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
    <script>
        $(document).ready(function () {
            function imageClickHandler () {
                var $newA = $(this).clone(false,false);
                $newA.removeAttr("style isImg vmlInitiated vmlBg");
                $newA.click(imageClickHandler);
                $(this).parent().append($newA);
                DD_belatedPNG.fix('a');
            }

            DD_belatedPNG.fix('a');
            $('a').click(imageClickHandler);

        });
    </script>
</head>
<body>
    <a></a>
</body>
</html>


身体{
背景：#0000FF；
}
$（文档）.ready（函数（）{
函数imageClickHandler（）{
变量$newA=$（“”）
var$newImg=$（this）.find（'img'）.clone（false，false）；
$newImg.attr（“样式”，“样式”）；
$newA.append（$newImg）；
$newA.click（imageClickHandler）；
$（this.parent（）.append（$newA）；
DD_latedpng.fix（'img'）；
}
DD_latedpng.fix（'img'）；
$（'a'）。单击（imageClickHandler）；
});

编辑此解决方案适用于bg元件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
    body {
        background:#0000FF;
    }
</style>
<script type="text/javascript" language="javascript" src="jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
<script>
    $(document).ready(function () {
        function imageClickHandler () {
            var $newA = $("<a></a>")
            var $newImg = $(this).find('img').clone(false,false);
            $newImg.attr("style","");
            $newA.append($newImg);

            $newA.click(imageClickHandler);
            $(this).parent().append($newA);
            DD_belatedPNG.fix('img');
        }

        DD_belatedPNG.fix('img');
        $('a').click(imageClickHandler);

    });
</script>
</head>
<body>
<a><img src="image.png" /></a>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
        body {
            background:#0000FF;
        }

        a {
            display:inline-block;
            //display:inline;
            zoom:1;
            width:512px;
            height:512px;
            background:url(image.png) no-repeat center center;
            text-decoration:none;
            outline:none;
        }
    </style>
    <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
    <script type="text/javascript" language="javascript" src="DD_belatedPNG_0.0.8a.js"></script>
    <script>
        $(document).ready(function () {
            function imageClickHandler () {
                var $newA = $(this).clone(false,false);
                $newA.removeAttr("style isImg vmlInitiated vmlBg");
                $newA.click(imageClickHandler);
                $(this).parent().append($newA);
                DD_belatedPNG.fix('a');
            }

            DD_belatedPNG.fix('a');
            $('a').click(imageClickHandler);

        });
    </script>
</head>
<body>
    <a></a>
</body>
</html>


身体{
背景：#0000FF；
}
a{
显示：内联块；
//显示：内联；
缩放：1；
宽度：512px；
高度：512px；
背景：url（image.png）无重复中心；
文字装饰：无；
大纲：无；
}
$（文档）.ready（函数（）{
函数imageClickHandler（）{
var$newA=$（this）.clone（false，false）；
$newA.removeAttr（“样式isImg vmlInitiated vmlBg”）；
$newA.click（imageClickHandler）；
$（this.parent（）.append（$newA）；
DD_latedpng.fix（'a'）；
}
DD_latedpng.fix（'a'）；
$（'a'）。单击（imageClickHandler）；
});

与其使用png补丁，不如使用IE支持的透明png（8位加alpha）。如果您使用的是Mac，它将为您执行此操作，否则您可以使用（ImageAlpha所基于的）为您执行此操作

解决这个问题不需要Javascript/IE过滤器类型的东西，应该避免使用。

与其使用png修复，不如使用IE支持的透明png（用alpha标记的8位）。如果您使用的是Mac，它将为您执行此操作，否则您可以使用（ImageAlpha所基于的）为您执行此操作

解决这个问题不需要Javascript/IE过滤器类型的东西，应该避免使用。

IE6的使用率已经降到了相当低的1%以下。你确定值得为此付出任何努力吗？老实说，我问自己很多，但我相信网站开发就是要了解你的目标受众，在这种情况下，我需要它尽可能地具有深远的影响和广泛的范围。IE6的使用率已经降到了相当低的1%以下。你确定值得为此付出任何努力吗？老实说，我问过自己很多，但我相信网站开发就是要了解你的目标受众，在这种情况下，我需要它尽可能地影响深远和广泛。安东，这看起来很棒。我没能补充说，我正在使用CSS中定义的背景图像。这可以修改为与背景图像一起使用吗？但在我看来，我们应该停止维护IE6和IE7，因为它们控制了网络的发展，破坏了用户的专业性。非常感谢，这符合我的需要，非常好。关于IE——很高兴听到web开发人员对我们是否应该继续满足IE6和IE7的意见，每次我研究这个问题时，大多数人都被鼓励继续为它编码，所以我一直在努力，但我一直想知道大多数web开发人员是否仍有这种感觉。我最希望的就是停止为过时的IE浏览器开发额外的样式表，但是当你需要接触到尽可能多的用户时，我想这不会有什么坏处。安东，这看起来太棒了。我没能补充说，我正在使用CSS中定义的背景图像。这可以修改为与背景图像一起使用吗？但在我看来，我们应该停止维护IE6和IE7，因为它们控制了网络的发展，破坏了用户的专业性。非常感谢，这符合我的需要，非常好。关于IE，很高兴听到web的意见