ie mhtml_MHTML –需要数据时：IE7及以下版本中的URI

ie mhtml

UPDATE: It's very important to have a closing separator in the MHTML document, otherwise there are known issues in IE7 on Vista or Windows 7. The details are here.

更新：在MHTML文档中有一个分隔符非常重要，否则在Vista或Windows 7的IE7中存在已知问题。详细信息在这里。

In the previous post I described what data: URIs are and how they are useful to reduce the number of HTTP requests. Now, the problem with data: URIs is that they are not supported by IE < 8. But, thanks to this article (in Russian), here's a way to work around that limitation: using MHTML for IE7 and under.

在上一篇文章中，我描述了什么数据：URI是什么以及它们如何减少HTTP请求的数量。现在，数据存在问题：URI <IE <8不支持URI。但是，感谢本文(俄语)，这是解决该限制的一种方法：将MHTML用于IE7及以下版本。

MHTML-什么？ (MHTML-a-what?)

MHTML is MIME HTML, or if you insist on me spelling it out completely is like "Multipurpose Internet Mail Extensions HyperText Markup Language". In short it's HTML but like email with attachments. In one "multipart" email you can have several... hm, things - HTML version of the email, text-only version, attachment, another attachment...

MHTML是MIME HTML，或者如果您坚持要我完全将其拼写出来，就像“多用途Internet邮件扩展超文本标记语言”。简而言之，它是HTML，但就像带有附件的电子邮件一样。在一个“多部分”电子邮件中，您可以有多个...嗯，事情-电子邮件HTML版本，纯文本版本，附件，另一附件...

MHTML is the same but for HTML. In one file you put a bunch of stuff (e.g. image files) and you save on the precious HTTP requests.

MHTML相同，但HTML相同。在一个文件中，您放了一堆东西(例如图像文件)，然后保存了宝贵的HTTP请求。

MHTML范例 (MHTML example)

Let's check out an example. The HTML is actually not important, it's the CSS where we'll stick all our inline images. Once with data: sheme for all normal browsers and once with the mhtml: scheme for IE before 8.

让我们来看一个例子。 HTML实际上并不重要，它是CSS，我们将粘贴所有内嵌图像。一次使用数据：sheme适用于所有普通浏览器，一次使用mhtml：方案(适用于8之前的IE)

The overall "template" would look like so:

整体“模板”如下所示：

/*
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
--_ANY_SEPARATOR
Content-Location:somestring
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAA[...snip...]SuQmCC
--_ANY_SEPARATOR--
*/
#myid {
/* normal browsers */
background-image: url("data:image/png;base64,iVBORw0[...snip...]");
/* IE < 8 targeted with the star hack */
*background-image: url(mhtml:http://phpied.com/mhtml.css!somestring);
}

The multipart stuff goes into a CSS comment. You then use data: URI scheme for all normal browsers. Then you use the star hack to target IE browsers before 8. For these browsers you give the URL of the CSS, exclamation and then a string that uniquely identifies the desired "part" in the multipart comment. Simple, eh? Didn't think so, but hey, it's not exactly rocket science.

多部分内容放入CSS注释中。然后，对所有普通浏览器使用data：URI方案。然后，您可以使用star hack将IE浏览器定位到8之前的版本。对于这些浏览器，您提供CSS的URL，感叹号，然后提供一个字符串，该字符串可在多部分注释中唯一标识所需的“部分”。简单吧？没这么认为，但是，嘿，这不是火箭科学。

包含更多部分的演示示例 (Demo example with more parts)

Check out a demo page that has two "parts" in the multipart MHTML comment.

签出一个演示页面，该页面在多部分MHTML注释中具有两个“部分”。

The HTML is noting special and the CSS goes like:

HTML值得注意，CSS类似于：

/*
Content-Type: multipart/related; boundary="_ANY_STRING_WILL_DO_AS_A_SEPARATOR"
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:locoloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR
Content-Location:polloloco
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAABkAAAAUBAMAAACKWYuOAAAAMFBMVEX///92dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYvD4PNAAAAD3RSTlMAACTkfhvbh3iEewTtxBIFliR3AAAAUklEQVQY02NgIBMwijgKCgrAef5fkHnz/y9E4kn+/4XEE6z/34jEE///A4knev7zAwQv7L8RQk40/7MiggeUQpjJff+zIpINykbIbhFSROIRDQAWUhW2oXLWAQAAAABJRU5ErkJggg==
--_ANY_STRING_WILL_DO_AS_A_SEPARATOR--
*/
#test1 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC"); /* normal */
*background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml.css!locoloco); /* IE < 8 */
}
#test2 {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAUBAMAAACKWYuOAAAAMFBMVEX///92dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnZ2dnYvD4PNAAAAD3RSTlMAACTkfhvbh3iEewTtxBIFliR3AAAAUklEQVQY02NgIBMwijgKCgrAef5fkHnz/y9E4kn+/4XEE6z/34jEE///A4knev7zAwQv7L8RQk40/7MiggeUQpjJff+zIpINykbIbhFSROIRDQAWUhW2oXLWAQAAAABJRU5ErkJggg=="); /* normal */
*background-image: url(mhtml:http://phpied.com/files/mhtml/mhtml.css!polloloco); /* IE < 8 */
}
div {
width: 100px;
height: 100px;
font: bold 24px Arial;
}

退税 (Drawback)

In addition to the drawbacks of data: URIs (bigger CSS, small CSS change invalidates your cached inline images), this method has the obvious drawback that the inline images are repeated twice. But sometimes... a person's gotta do what a person's gotta do