Question

情景

我有一个带有HTML / CSS前端的asp.net Web应用程序。这一切都运行正常，但在Internet Explorer 6中，我在网站中使用的透明PNG由于此特定浏览器的设计不佳而不透明。

试图解决方案

我已经尝试了各种不起作用的IE6 PNG透明度修复程序。

提议的解决方案

当网站检测到浏览器是IE6时，我考虑过使用GIF图像替换。我没有任何javascript经验，但有人提到我可以使用javascript上的“document.write（）”功能，将IEG替换为使用IE6作为浏览器的同一图像的GIF。

问题

请有人向我解释我将如何做这件事？记住我对C＃等有所了解，但没有javascript知识。我只是刚刚开始作为网络开发人员，所以简单的解释对我有很大的帮助。

感谢您的帮助。问候。

Answer 1

如果我们假设

a）gif文件名称相同，

b）它们已经存在（你不是在寻找一些gif创建者）。

然后你只需要替换这些文件的src属性。这将完成onload，并且不需要document.write（）。跟着：

<!--[if lte IE 6]>
<script type="text/javascript">

    window.onload = function() {

        var images = document.getElementsByTagName("img");

        for (var i = 0; i < images.length; i++) {

            var image_png_src = images[i].src;
            var image_gif_src = image_png_src.replace(".png", ".gif");
            images[i].src = image_gif_src;
        }
    };
</script>
-->

上述方法的好处是它不必每次都检查它是gif，还是png或jpg，因为除非有.png，否则它根本不会用.gif替换它。糟糕的是，如果由于某种原因，你有一个.png的图像（我无法想象为什么）但它不是文件扩展名，它将用.gif替换那个位。

希望有所帮助。

Answer 2

你试过jQuery的pngFix吗？它使得PNG的PNG透明，你不需要维护两组图像（PNG和GIF）。

使用它不需要太多的javascript知识，所以看一下就不会有什么坏处。

Answer 3

假设你的img元素有一个id =“my_img”

要检测浏览器是否为IE6，请使用条件注释。此外，添加如下Javascript：

<!--[if IE 6]>
  <script>
    document.getElementById("my_img").src = "images/alternate.gif"
  </script>
<![endif]-->

您可能还想看看这个： IE6 PNG transparency

Answer 4

以下代码仅在IE6上运行替换：

window.onload = function() {
    if(navigator.userAgent.match(/MSIE 6/) != null)) {
    var images = document.getElementByTagName("img");
       for (var i = 0; i < images.length; i++) {
          var src = images[i];
          if(src.match(/\.png$/)){ //endswith .png
             images[i].src = src.replace(/\.png$/g,'.gif');
          }
       }
    }
};

Answer 5

jQuery版本的替代品：

$(document).ready(function()
{
    // List all PNG images
    $("img[src$=.png]").each(function(i, img)
    {
        // Replace with GIF versions
        img.src = img.src.replace(/\.png$/, '.gif')
    });
});

Answer 6

如果你想学习javascript，W3Schools是一个很好的起点。例如，请查看getElementsByTagName函数...

还有浏览器检测功能here

祝你好运 - 希望有所帮助。

Javascript document.write（） - 用GIF替换PNG？

情景

试图解决方案

提议的解决方案

问题

6 个答案: