IE6：如何让内联 base64 图像与 IE6 一起使用？答案

【问题标题】：IE6: How to get inline base64 images to work with IE6?IE6：如何让内联 base64 图像与 IE6 一起使用？
【发布时间】：2010-12-07 05:10:06
【问题描述】：

如何让 IE6 显示内联 base64 编码图像？

<img src="data:image/png;base64,....." />

这适用于 Firefox/Chrome/Safari，但不适用于 IE6。

【问题讨论】：

只是好奇：您（或任何人）为什么要这样做？不是所有浏览器都首选可缓存图像吗？在外部 CSS 文件中对我来说似乎很好，但在 HTML 中却不行。
可缓存如：任何像往常一样下载然后可以被浏览器缓存的图像。还是在某些单文件、非托管 HTML 中使用？
内联减少 HTTP 请求。
@Jacob：内联可能会减少 HTTP 请求的数量，但是 1）您必须传输更多数据，因为编码会使二进制图像数据更大，2）现代浏览器可以更快地加载页面，如果图片是可以并行下载的单独资源，并且 3) 缓存可能效果不佳，尤其是在您的页面是动态生成的情况下。
如果您担心 http 请求，您可能需要查看图片的 sprite。然后，您只需对页面和所有图像执行两次 http 请求。 alistapart.com/articles/sprites 这可能对您的情况没有帮助，例如，如果您正在生成 html 和单个图像。

标签： html internet-explorer image conditional base64

【解决方案1】：

安装 Google 的 Chrome Frame？

说真的，你不能。 IE6 不支持 base64 内嵌图片。

【讨论】：

我可以做条件语句，以便 IE6 链接到实际文件，但除此之外，它显示 base64？
您必须使用 javascript 动态设置 src，这在 IMO 中比它的价值更麻烦。从服务器加载图像并不是一件坏事；这意味着用户可以为多个页面加载缓存它们。你为什么要让它们内联？
Chrome Frame 的可悲之处在于，公司不会开始选择它——他们仍然在使用 IE6。因此，它同时相对愚蠢和悲伤。这是一个有趣的想法，但浪费在了开发人员身上，而不是最终用户身上。
条件 cmets 应该可以完成这项工作，但是为什么还要包含 base64 图像呢？它将比原始图像更大，并且浏览器可以更快地加载单独的图像文件。如果您想要一个文件，您可能需要查看适用于 IE 5 及更高版本的 MHTML (.mht) 文件格式。其他浏览器的支持很差。见en.wikipedia.org/wiki/MHTML。
对于很多小图像，我会使用精灵。

【解决方案2】：

如果这不是为了企业环境，我会说直接放弃对 IE6 的支持，如果他们坚持使用这种过时的浏览器，请让人们安装 Chrome Frame。

【讨论】：

我可以做条件语句，以便 IE6 链接到实际文件，但除此之外，它显示 base64？
视情况而定，您使用的是 PHP 之类的脚本语言吗？
PHP 有什么帮助？这必须在客户端执行。不，只是 HTML
如果您使用 PHP 或任何其他 Web 语言，您可以检查用户的代理字符串并据此做出决定。
@darkassassin93：Jacob 指的是条件 HTML cmets，这是一种 IE 特定功能，用于支持 HTML 中特定于浏览器的行为。见en.wikipedia.org/wiki/Conditional_comment

【解决方案3】：

原创

我不相信 IE6 支持 <img/> 标记的内联数据。不过，您可能想尝试其他格式，例如 GIF 或 JPG。

编辑鉴于 IE 需要永远准确地支持 PNG（仍有争议）这一事实，我们可以很容易地推断出 PNG 可能不被支持作为<img/> 标签的内联数据格式。话虽如此，转到**ORIGINAL**

【讨论】：

如果IE6不支持内联数据，格式是什么有关系吗？
可能 mimetnet 认为问题在于缺少 PNG 支持，在这种情况下 GIF 或 JPG 可能会起作用。
IE6 支持 PNG（但不支持 alpha 透明度，虽然似乎有解决方法，请参阅support.microsoft.com/kb/294714）
IE 从某些 4.x 版本开始支持 PNG。（不过，透明 PNG 很麻烦。）
IE6 实际上支持 PNG。它只是不支持 32 位 alpha 通道。

【解决方案4】：

您至少可以在 CSS 中使用 base64。请看：http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

也许更多的研究可能有助于将 mhtml:// 用于内联图像。

【讨论】：

【解决方案5】：

IE6 需要一个表达式来正确解释 base 64 编码图像。 Dean Edwards 在这里描述了解决方案：http://dean.edwards.name/weblog/2005/06/base64-sexy/

注意：这是一个非常丑陋的 hack。首先，我们将图像代码放入 CSS 中；使用此解决方案，您需要将表示数据放在 Javascript 中，或者将行为数据放在 CSS 中。讨厌但必要。

【讨论】：

【解决方案6】：

我的解决方案在 IE6 上运行流畅。或许能帮到你！

<!--
Content-Type: multipart/related; boundary="=_data-uri"
-->
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pic {
width:670px;height:710px;
background-image: expression("url(mhtml:" + window.location + "!locoloco)");
}
</style>
</head>
<body> 

<div id="pic" ></div>
<div id=test style="display: none;">

--=_data-uri
Content-Location:locoloco
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8  /w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--=_data-uri--

</div>
</body>
</html>

【讨论】：

你能解释一下这里发生了什么吗？它看起来很有趣，但例如... !locoloco?
@Chris 这利用了多部分 HTML（请参阅下面的答案）——一种在单个 HTML 文件中描述多个资源的几乎未实现的技术。由于该文件将有一个 URI，因此各个部分都被赋予了“Content-Location”标头，这些标头可以通过前面的 ! 引用，然后附加到该位置（就像 # 在 HTML 中指定给定的 DOM 节点位置一样文件）。

【解决方案7】：

这可能是让 Base64 图像再次显示在 IE6 中的快速修复：

Base64 image fix for Internet Explorer

*抱歉链接断开，现在是正确的链接！

我认为这是一种非侵入式的方式，可以让事情再次发挥作用。它实际上是在您在 IE 上显示那些损坏的图像（损坏的图标）之后修复图像。

【讨论】：

【解决方案8】：

base64 图像显示在 IE6 和 IE7 中...最后我找到了一个简单的解决方案，当您在 css 中使用编码图像时。

“在同一个类中编写两个属性。使用 css 浏览器特定的 hacks”

我将在下面解释它。

   <div class="myClass">    </div>
    <style>
            .myClass{
                    background=url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D'); 
    /* Above property will work for all browsers*/

                    *background=url('give real path_to_image'); 
/* This will work only for ie6 and ie7 */
                    }
        </style>

【讨论】：

我认为这是克服 IE6 和 IE7 问题的简单方法。我欢迎，如果有人有比这更好的解决方案。