IE6：如何让内联 base64 图像与 IE6 一起使用？
Posted
技术标签:
【中文标题】IE6：如何让内联 base64 图像与 IE6 一起使用？【英文标题】：IE6: How to get inline base64 images to work with 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 和单个图像。 【参考方案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 问题的简单方法。我欢迎，如果有人有比这更好的解决方案。以上是关于IE6：如何让内联 base64 图像与 IE6 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章