IE6: How to get inline base64 images to work with IE6?_问答_开发者

IE6: How to get inline base64 images to work with IE6?

开发者 https://www.devze.com 2022-12-08 02:08 出处：网络

How do I get IE6 to display inline base64 开发者_JAVA百科encoded images? <img src=\"data:image/png;base64,.....\" />

How do I get IE6 to display inline base64 开发者_JAVA百科encoded images?

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

This works in Firefox/Chrome/Safari but not IE6.

My solution run smoothly on IE6. It may help you!

<!--
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>

Install Google's Chrome Frame?

Seriously, you can't. IE6 does not have support for base64 inline images.

IE6 needs an expression to correctly interpret base 64 encoded images. Dean Edwards describes the solution here: http://dean.edwards.name/weblog/2005/06/base64-sexy/

Note: this is a very ugly hack. In the first place we were putting image code in our CSS; with this solution you need to either put presentational data in Javascript, or behavioural data in your CSS. Nasty but necessary.

base64 images are showing up in IE6 and IE7... in the last i found a simple solution when you are using a encoded images in css.

"write two attributes in a same class. Use css browser specific hacks"

I am going to explain it below.

   <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>

If this isn't for a corporate setting, I'd say just drop IE6 support all together, and have people install Chrome Frame if they insist on using such an outdated browser.

You can use base64 in CSS, at least. Please take a look: http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/

Perhaps more research could possible help using mhtml:// for inline images, too.

This could be a quick fix to make Base64 images showing up in IE6 again:

Base64 image fix for Internet Explorer

*Sorry for the broken link, now comes the correct one!

I think this is a non-intrusive way to make things working again. It actually repair the images after you have those broken images (broken icon) already displayed on IE.

ORGINAL

I do not believe IE6 supports in-line data for the <img/> tag. However, you might want to try another format like GIF or JPG.

EDIT Given the fact that it took IE forever to accurately support PNG (still debatable) one could easily deduce that PNG might not be supported as an in-line data format for <img/> tags. With that said, goto **ORIGINAL**