Base64图像未显示在IE6中

时间:2013-02-15 07:22:02

标签: html image base64 internet-explorer-6

我正在尝试从IE6编码的字符串中base64呈现图像。根据资源herehere,我正在尝试以下代码(图片只是我的个人资料图片的base64编码,这里... :),来自{{ 3}})

<!--
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>
<script type = 'text/javascript'>
window.onload = function() { alert(window.location); }
</script>
</head>
<body> 
<div>Foo</div>
<div id="pic" ></div>
<div id=test style="display: none;">

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

/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/AAAAF5jcHJ0AAABXAAAAAt3dHB0AAABaAAAABRia3B0AAABfAAAABRyWFlaAAABkAAAABRnWFlaAAABpAAAABRiWFlaAAABuAAAABRyVFJDAAABzAAAAEBnVFJDAAABzAAAAEBiVFJDAAABzAAAAEBkZXNjAAAAAAAAAANjMgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0ZXh0AAAAAEZCAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAADFgAAAzMAAAKkWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPY3VydgAAAAAAAAAaAAAAywHJA2MFkghrC/YQPxVRGzQh8SmQMhg7kkYFUXdd7WtwegWJsZp8rGm/fdPD6TD////bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/CABEIAKAAoAMAIgABEQECEQH/xAAbAAADAQEBAQEAAAAAAAAAAAADBAUCAQAGB//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwAAARECEQAAAfiw7yeL3Br2dHG1Tm9ZGdwXYBxV08gMYQetA8GyZyYJvOemi5ZOGJ4FjRxcVnRL7RRJxy5BF1gB4ozIN4Pb8yFpkoADMGAt+6cAYRPh2YZzB+ifCiOq84FC0uULUi8EIMxvfOmiDIeXKoT476grrORgOCCw9jLqL4BS/M2XNKHKHvniH0G47A0LBCBJ+2mnzO+cNlUpkvF2QWhNAJ7W+D7XCCk2ogPmlaKRpjpwVXJ8ojdTO/RpUjHzd2EEwlwrtr2hxN9QXVdGJUOunOnCLLmAQGHxjLIjCvyVCYOz7KIf6D5KwfQ9RcAt9GNbDwIvwJwfRgwGVHlDKGB1Kp8vwJSdSA2UnYxCzyf0f4DZwehHR+GYB5gLOozihfkWT83p6dGU6OBQstwb9woIuBBRjCGWGwdc9oEi6sUHt0Jf/8QAJhAAAgIBBAICAgMBAAAAAAAAAQIAAxEEEBIhEzEiMiBBBRQjQv/aAAgBAAABBQI9b9iZmYD2BOoHhOZwYzxGJWAeY5F+zPW7bZ6yZ7mJiKIVmNvLgc2MB41ct+MM/R/HEA7xiZ2OZgmIktPWJw+IEXsfth2/4CKsAhE4mLSxg0jT+vPHwhHI4AnLb9noExjncRUiUdLSs8CxdMggRRsRLvoVmIwi+z09hE9w9GAZiVkmqnEAgAgmdjtefhznuETx/Kz2diOpphmKgEGw3EMaWdl0gYiB4H7b5QjYr1iabqDsCD8TLY7/ADLfEw+gpJ9Q7GsGPViI5Q12g7BsEYMxOMxGjDI1GncTkYcxe5XMdYySOyWK4GfiJxQzTkk2qYbLUiahoLrINQRPOp3u0qPPq3U9Gqp7I+kXDAqT9MZhT5KVUVsATesZ6zA4BqsBHOchOSiHVplv7FosoCT/AKq03M1VhlsUCa1ACuMfv22B5K9OtcPt1hrmRVHtURV1NsTQCBFSNL/slebMEBRyq7469v8ATkBMloi5ldObWT/Ph0ywrPFzldKLMT1GhmpB8lK4VSITGIVbG8lj5BFhE07ZXTDt/bYhBmDFQ5A2aNswBJlKiWdTVajyRftYNtM8pu684nOppmKdy0Jh2MYxNQAt9jWDQ6RbZfpeFhGY9UTKWVrydBAvKcBgdTMzCZnYwxovQt+v8aYaw67WTT2xGEBnOEzMJ/FjF+TS6fx6/wCiCeQTM8JsZaPG3AqQ7LPK08sB2O5MY5iLgGWe9HhRWRgdyuoxFCjUvwYWBpzE5loRkIcTlMzMLQtEXZofa1ltMlLYpo8YAi1Ey6gMor4lVMG2MbZhaZzESAbGfuoYoT1//8QAFhEAAwAAAAAAAAAAAAAAAAAAABFg/9oACAECEQE/AaNn/8QAFhEAAwAAAAAAAAAAAAAAAAAAABFg/9oACAEBEQE/AaNH/8QAKBAAAgEDAwMEAgMAAAAAAAAAAAERAiExECAwEkFhAzJRcUCBIiOR/9oACAEAAAY/AuXJHYe+3BghI8De18F9bbOnY9Z4cF9IG9jjRvffTBZa2Hxy+B8HVrjilfhwPxw+OLqpvtk8aSouf2Nngs2Q2WMaYZek+NfhnS9fB7rn0LSBS7nVn6PbV/h3/a0tUYk9pLhIihOt+Dt6aMtvTqqwZhLsITGnqk1IqkovfYviSMvwWS9NE+pU62RSo0jRENH7FT42I6dtqVt+yWUoikl4Q6vnWSdntZjglq5J0U42Oktkmos+O6ZGKR11fpCrp9r1RJnlZ0jpey/O/rZY6crsZsWL0l1HHVU3Bksfy0pq7c9kncdMWqiS+dXSzp7r8D//xAAlEAEAAgICAwEAAQUBAAAAAAABABEhMVFhEEFxgZEgobHB0eH/2gAIAQAAAT8hUOWU8TBpqDG45jKIauZjeCAGAuO61DVIX5/tOsOYhZpLG41HrmXRLlYfChKGLM7phZZh8h6Srw75zLFheMQ6vSWFxiLb7lLmbY5EGYrebd+DBfghB6MR3GSXPf5LtuMf/IOzn7BfVvEYIm1Rpbubxi7xqU5TQ9cTflL8EHPi6MnMZ1LHX8RLGUwaEz9MSFBjcuR/Juv2LaOGYSzcyFyhqCFf4QfIWzVRuYTf5NizBDQXNxGhPyIVB4IaRheIl0j/AO5SvcQWiVZjVFwhsPC6QQEx8jB3OBATSXfguJ9wz4lC4CX7gqxVTvcSuY6ntpuGUT3KeD5XB8joiuuUPLCaiDnU04Mk8mp4HB5YYYQXKonqEIosTIXEsk5lVMtYRpzCwjqF2+d2yFsLBGHcu9TcRDuU5h2hO0FhjFTSUWRQcrY6d1HIHWp7ekUpAKj0ublnvUXDZeCMb5FFypbjAQvGYj/hMZdLdbSx0xLhKh3Ec0TLeKlOzE0pXJgGDl2JTAMHrEQKYo0X3DintNkjUudP2L5afQlrqzqWbB2RPsfEE3h8gGzsM+AIYW/7TLy+SYYBPWnGMCv8hDgGGC/aS+zzqppFUw4NRaok1MZikEWViYcEz5yTJLTylOBq0If9yy39gcQGiOpoyjd7IYrqWIhbQGElrJuouF6sxksXUXOAmskL8I4uYE2ylBxmadPyHGaeGkAEv0i+yYr+VZuwnLNDMzfuW7tQ2L8cEV15ljqyV1EnhnoNy+G0odzrgARRRhxTJNITYgFm1FyN8vM0EweMFnyGFWG+pc0KfIk/zTZrRLiFQa/oCvhRCGV0XFVH3cs2fq4Vw6uGCImyWB5lhp8iXtB2gEZqhD4jKxeDtqCLqBZpqAJi3w6m8DWzOXEMjiEeyHiL4WL4B+McE0qILFg/YQokpjTmX6bS7eJPb38ghl/IUab6l3vyWXKJaon2ppMhCCBq1lg0xlzqWxyYTK/IR1c7aUw+xGAN0MVaA6mwzNCMssURnE97AmkNmZ/udPypiAVVfoMzIbd9TVW4xTiKncvm+iyfZCyoiGMVyzxPayqPjU03yHCf/9oADAMAAAERAhEAABDCzjyiDggBgAwSRgyyQBASRxhyBiBwwiywwAhAzwjgjBhyxAByyBgAxSAAgihwQQxjjQBThRhDCRAjASAiAiTAADQBiQgggxxywQf/xAAXEQEAAwAAAAAAAAAAAAAAAAABABFg/9oACAECEQE/ENGMKn//xAAXEQADAQAAAAAAAAAAAAAAAAAAARFg/9oACAEBEQE/ENHDdP/EACUQAQACAgICAQQDAQAAAAAAAAEAESExQVFhcYGRobHBENHh8P/aAAgBAAABPxD0olnbDzIFw+BDCUrisxmoPhICGhe464i7uWm3WRzKGFcpG6tcCxSifmY0CG7XUtlFyQYItGzdc1/szElqHzDEB2W+yCBWcVM0bIFtallPObhzGos5K4ma9Lupd9jtiKItsZ4hJZr43LtOThGGuLMQrup1MIXri7JUhfbWfUVrVxh94CIBQTANbhWba3Mhe5gUMUXFKi1TX2mKND+Zgkch+YUqlBbJfUVi+CO7vEBesS7A/FyoPYHJFSgnxFtZHYiaAE4IRVNm0MEgQ6hYwDk4xHJw5U5img8RMJFpKcbr5gDSqWBkjDsIAb4K5cQCRjlLRVghjQQdNTDdL5I1Xl0NwHBOaI1lnwIAF8DcAohVpcAW1FodzmgiH7RwYrKPsQOZVGkYHGR+YjmOSHsP7haFKL+cRSSZzfUa/aIIbVVM3C5WHcW8xwLqKJR0OY/AnS6ggNBnLFhBT7/ea51qlMuCseoi6A8EI5m0CLB4G4629h6dSvjldaI+TdAA81KHOWv6lQLK2kRDGcE8STmak1CItYRRR3r4l0R9I1GCth7bgCpifYjwq4hiV+0C4bSh4iUKsyi/MHJZp/EMBtGYi3Ay2LkCxc+0RzlRBRaqbMGkyogD2QKDLADEvVcQ6PxM2Ys+9xdy9z7j2FDlPHH5l5r4RJkmkZtDKxhoX3YDFty+sBKbyXvcw+Q4hclHEaMQcMAtIEQ1DIdsDtNahxXRFvJUcd6T9yxvLz9RgAqMJ1cFI3gWkiGEFVSEAXRnBqAg0chElCVHdEK1Hs2DuMGQ+IVbAa6gCeEEhVLTSXOIS7BEgT1nK1KkDJAzUoahKSMBaS9tSiHL+kNAorLFVD4M/MVtuypWxfqPCxYtdfSpaKLx+8xKNr1Uy4KHkV9ZYAgRrNQybJWiYAqOb3HkhRwQhUubyJRMQbpzC4nu1AFh9ZyC5btchc+YAPYNKR2ghAxCjA23cJyrxVccOHkq/UobKqhmACcDUR6n7SkgqwYYHRLsIV17l7XqALV/4ma8erPwsIwUwCr7So8Vl2xSW7Aw24epnUHauUaHRRKGVzQE9120+suY6t4Zl2W3HZX9wrBt4leeITkwaYQBp/xBY6GiEhSR+JTFAw7RL2hxcAzhpTBcNFiy/wDrmmAKuKcavGXxClUrVua4v3AdDtCo40XcpbEjtVkpp/dRlJBLV8lr7hUc8Oa+ZUD+aYHxKwNwAlEu9zLBkPVw+7F0epXnC0BwT0gZJDKQCl9zbR+YX/JzgsoKMaXcsaZ0lxB2LvRDU1nJO5Tc4BZd0yhshBQ+JauAK1zxXzKx7FtKzCIoMV3HaF9wYrIARjkwD4gTVjI0EACKmin4I0SqpyR8k0ejgioKVpdwW/KwQuMIV9CKy7ZOkFLdGxjSyZw4l2kL6zDiwkV8G4/yZgZU64P8BBuhqUKgHARYBZheIFghMQg0t26PEY8G5esRKWNrmriq5hHYg9zu2Ze6L0QO52kIHmXPqCP3EqljxWzAsefM3eszACnKH6TGyNmv6CBrbMrFncxjLkfS9SpMtMVhDRjD3lVqriOAeZSOVRyAOOIV+jKOZUYZc2vMZGpm/gVbZgHLBA8S8eGODQlvz5lhhAYhN0uXOGUx6Gz/ACXKx9wgtwOmBdfmA6mCMlRcZlBMUoNxR6gYeiO/MwlYAXLwZtfmNoWoYJicqTnpMTRANPP6hsAjHNMfqleTSXO13GxFixDsGHcfbEBnL3MkcoVmyJk1dSqKy2zGRW8wDVCiD6wOh9LDdvULgWaCCnB04j1YW4ZNtiVqHQlWQkGedS1NBVCj6QUcz3PhP4L4PLDG47TMfzfiCGosgnrTOUJ3AS3L3K8oNYfuaDXMIK0svwiqAqcEs9fnmo222RTTFyE8C+oPFtO4KsQbiCNGWOmCcwg5jvFRFICArUrVTRmdo3HGabOp/9k=
--=_data-uri--

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

但是当我在IE6中运行该页面时,图像不会显示。任何人都可以告诉我我做错了什么,以及如何修复它以便它在IE6中显示正常?我将文件保存在桌面上并尝试在IE6 ...

中打开该文件

更新

根据Musa在下面的评论,我更改了代码,仅在CSS中包含了hack。仍然没有工作:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*
Content-Type: multipart/related; boundary="=_data-uri"

--_
Content-Location:locoloco
Content-Type: image/png
Content-Transfer-Encoding:base64

/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/AAAAF5jcHJ0AAABXAAAAAt3dHB0AAABaAAAABRia3B0AAABfAAAABRyWFlaAAABkAAAABRnWFlaAAABpAAAABRiWFlaAAABuAAAABRyVFJDAAABzAAAAEBnVFJDAAABzAAAAEBiVFJDAAABzAAAAEBkZXNjAAAAAAAAAANjMgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0ZXh0AAAAAEZCAABYWVogAAAAAAAA9tYAAQAAAADTLVhZWiAAAAAAAAADFgAAAzMAAAKkWFlaIAAAAAAAAG+iAAA49QAAA5BYWVogAAAAAAAAYpkAALeFAAAY2lhZWiAAAAAAAAAkoAAAD4QAALbPY3VydgAAAAAAAAAaAAAAywHJA2MFkghrC/YQPxVRGzQh8SmQMhg7kkYFUXdd7WtwegWJsZp8rGm/fdPD6TD////bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/CABEIAKAAoAMAIgABEQECEQH/xAAbAAADAQEBAQEAAAAAAAAAAAADBAUCAQAGB//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwAAARECEQAAAfiw7yeL3Br2dHG1Tm9ZGdwXYBxV08gMYQetA8GyZyYJvOemi5ZOGJ4FjRxcVnRL7RRJxy5BF1gB4ozIN4Pb8yFpkoADMGAt+6cAYRPh2YZzB+ifCiOq84FC0uULUi8EIMxvfOmiDIeXKoT476grrORgOCCw9jLqL4BS/M2XNKHKHvniH0G47A0LBCBJ+2mnzO+cNlUpkvF2QWhNAJ7W+D7XCCk2ogPmlaKRpjpwVXJ8ojdTO/RpUjHzd2EEwlwrtr2hxN9QXVdGJUOunOnCLLmAQGHxjLIjCvyVCYOz7KIf6D5KwfQ9RcAt9GNbDwIvwJwfRgwGVHlDKGB1Kp8vwJSdSA2UnYxCzyf0f4DZwehHR+GYB5gLOozihfkWT83p6dGU6OBQstwb9woIuBBRjCGWGwdc9oEi6sUHt0Jf/8QAJhAAAgIBBAICAgMBAAAAAAAAAQIAAxEEEBIhEzEiMiBBBRQjQv/aAAgBAAABBQI9b9iZmYD2BOoHhOZwYzxGJWAeY5F+zPW7bZ6yZ7mJiKIVmNvLgc2MB41ct+MM/R/HEA7xiZ2OZgmIktPWJw+IEXsfth2/4CKsAhE4mLSxg0jT+vPHwhHI4AnLb9noExjncRUiUdLSs8CxdMggRRsRLvoVmIwi+z09hE9w9GAZiVkmqnEAgAgmdjtefhznuETx/Kz2diOpphmKgEGw3EMaWdl0gYiB4H7b5QjYr1iabqDsCD8TLY7/ADLfEw+gpJ9Q7GsGPViI5Q12g7BsEYMxOMxGjDI1GncTkYcxe5XMdYySOyWK4GfiJxQzTkk2qYbLUiahoLrINQRPOp3u0qPPq3U9Gqp7I+kXDAqT9MZhT5KVUVsATesZ6zA4BqsBHOchOSiHVplv7FosoCT/AKq03M1VhlsUCa1ACuMfv22B5K9OtcPt1hrmRVHtURV1NsTQCBFSNL/slebMEBRyq7469v8ATkBMloi5ldObWT/Ph0ywrPFzldKLMT1GhmpB8lK4VSITGIVbG8lj5BFhE07ZXTDt/bYhBmDFQ5A2aNswBJlKiWdTVajyRftYNtM8pu684nOppmKdy0Jh2MYxNQAt9jWDQ6RbZfpeFhGY9UTKWVrydBAvKcBgdTMzCZnYwxovQt+v8aYaw67WTT2xGEBnOEzMJ/FjF+TS6fx6/wCiCeQTM8JsZaPG3AqQ7LPK08sB2O5MY5iLgGWe9HhRWRgdyuoxFCjUvwYWBpzE5loRkIcTlMzMLQtEXZofa1ltMlLYpo8YAi1Ey6gMor4lVMG2MbZhaZzESAbGfuoYoT1//8QAFhEAAwAAAAAAAAAAAAAAAAAAABFg/9oACAECEQE/AaNn/8QAFhEAAwAAAAAAAAAAAAAAAAAAABFg/9oACAEBEQE/AaNH/8QAKBAAAgEDAwMEAgMAAAAAAAAAAAERAiExECAwEkFhAzJRcUCBIiOR/9oACAEAAAY/AuXJHYe+3BghI8De18F9bbOnY9Z4cF9IG9jjRvffTBZa2Hxy+B8HVrjilfhwPxw+OLqpvtk8aSouf2Nngs2Q2WMaYZek+NfhnS9fB7rn0LSBS7nVn6PbV/h3/a0tUYk9pLhIihOt+Dt6aMtvTqqwZhLsITGnqk1IqkovfYviSMvwWS9NE+pU62RSo0jRENH7FT42I6dtqVt+yWUoikl4Q6vnWSdntZjglq5J0U42Oktkmos+O6ZGKR11fpCrp9r1RJnlZ0jpey/O/rZY6crsZsWL0l1HHVU3Bksfy0pq7c9kncdMWqiS+dXSzp7r8D//xAAlEAEAAgICAwEAAQUBAAAAAAABABEhMVFhEEFxgZEgobHB0eH/2gAIAQAAAT8hUOWU8TBpqDG45jKIauZjeCAGAuO61DVIX5/tOsOYhZpLG41HrmXRLlYfChKGLM7phZZh8h6Srw75zLFheMQ6vSWFxiLb7lLmbY5EGYrebd+DBfghB6MR3GSXPf5LtuMf/IOzn7BfVvEYIm1Rpbubxi7xqU5TQ9cTflL8EHPi6MnMZ1LHX8RLGUwaEz9MSFBjcuR/Juv2LaOGYSzcyFyhqCFf4QfIWzVRuYTf5NizBDQXNxGhPyIVB4IaRheIl0j/AO5SvcQWiVZjVFwhsPC6QQEx8jB3OBATSXfguJ9wz4lC4CX7gqxVTvcSuY6ntpuGUT3KeD5XB8joiuuUPLCaiDnU04Mk8mp4HB5YYYQXKonqEIosTIXEsk5lVMtYRpzCwjqF2+d2yFsLBGHcu9TcRDuU5h2hO0FhjFTSUWRQcrY6d1HIHWp7ekUpAKj0ublnvUXDZeCMb5FFypbjAQvGYj/hMZdLdbSx0xLhKh3Ec0TLeKlOzE0pXJgGDl2JTAMHrEQKYo0X3DintNkjUudP2L5afQlrqzqWbB2RPsfEE3h8gGzsM+AIYW/7TLy+SYYBPWnGMCv8hDgGGC/aS+zzqppFUw4NRaok1MZikEWViYcEz5yTJLTylOBq0If9yy39gcQGiOpoyjd7IYrqWIhbQGElrJuouF6sxksXUXOAmskL8I4uYE2ylBxmadPyHGaeGkAEv0i+yYr+VZuwnLNDMzfuW7tQ2L8cEV15ljqyV1EnhnoNy+G0odzrgARRRhxTJNITYgFm1FyN8vM0EweMFnyGFWG+pc0KfIk/zTZrRLiFQa/oCvhRCGV0XFVH3cs2fq4Vw6uGCImyWB5lhp8iXtB2gEZqhD4jKxeDtqCLqBZpqAJi3w6m8DWzOXEMjiEeyHiL4WL4B+McE0qILFg/YQokpjTmX6bS7eJPb38ghl/IUab6l3vyWXKJaon2ppMhCCBq1lg0xlzqWxyYTK/IR1c7aUw+xGAN0MVaA6mwzNCMssURnE97AmkNmZ/udPypiAVVfoMzIbd9TVW4xTiKncvm+iyfZCyoiGMVyzxPayqPjU03yHCf/9oADAMAAAERAhEAABDCzjyiDggBgAwSRgyyQBASRxhyBiBwwiywwAhAzwjgjBhyxAByyBgAxSAAgihwQQxjjQBThRhDCRAjASAiAiTAADQBiQgggxxywQf/xAAXEQEAAwAAAAAAAAAAAAAAAAABABFg/9oACAECEQE/ENGMKn//xAAXEQADAQAAAAAAAAAAAAAAAAAAARFg/9oACAEBEQE/ENHDdP/EACUQAQACAgICAQQDAQAAAAAAAAEAESExQVFhcYGRobHBENHh8P/aAAgBAAABPxD0olnbDzIFw+BDCUrisxmoPhICGhe464i7uWm3WRzKGFcpG6tcCxSifmY0CG7XUtlFyQYItGzdc1/szElqHzDEB2W+yCBWcVM0bIFtallPObhzGos5K4ma9Lupd9jtiKItsZ4hJZr43LtOThGGuLMQrup1MIXri7JUhfbWfUVrVxh94CIBQTANbhWba3Mhe5gUMUXFKi1TX2mKND+Zgkch+YUqlBbJfUVi+CO7vEBesS7A/FyoPYHJFSgnxFtZHYiaAE4IRVNm0MEgQ6hYwDk4xHJw5U5img8RMJFpKcbr5gDSqWBkjDsIAb4K5cQCRjlLRVghjQQdNTDdL5I1Xl0NwHBOaI1lnwIAF8DcAohVpcAW1FodzmgiH7RwYrKPsQOZVGkYHGR+YjmOSHsP7haFKL+cRSSZzfUa/aIIbVVM3C5WHcW8xwLqKJR0OY/AnS6ggNBnLFhBT7/ea51qlMuCseoi6A8EI5m0CLB4G4629h6dSvjldaI+TdAA81KHOWv6lQLK2kRDGcE8STmak1CItYRRR3r4l0R9I1GCth7bgCpifYjwq4hiV+0C4bSh4iUKsyi/MHJZp/EMBtGYi3Ay2LkCxc+0RzlRBRaqbMGkyogD2QKDLADEvVcQ6PxM2Ys+9xdy9z7j2FDlPHH5l5r4RJkmkZtDKxhoX3YDFty+sBKbyXvcw+Q4hclHEaMQcMAtIEQ1DIdsDtNahxXRFvJUcd6T9yxvLz9RgAqMJ1cFI3gWkiGEFVSEAXRnBqAg0chElCVHdEK1Hs2DuMGQ+IVbAa6gCeEEhVLTSXOIS7BEgT1nK1KkDJAzUoahKSMBaS9tSiHL+kNAorLFVD4M/MVtuypWxfqPCxYtdfSpaKLx+8xKNr1Uy4KHkV9ZYAgRrNQybJWiYAqOb3HkhRwQhUubyJRMQbpzC4nu1AFh9ZyC5btchc+YAPYNKR2ghAxCjA23cJyrxVccOHkq/UobKqhmACcDUR6n7SkgqwYYHRLsIV17l7XqALV/4ma8erPwsIwUwCr7So8Vl2xSW7Aw24epnUHauUaHRRKGVzQE9120+suY6t4Zl2W3HZX9wrBt4leeITkwaYQBp/xBY6GiEhSR+JTFAw7RL2hxcAzhpTBcNFiy/wDrmmAKuKcavGXxClUrVua4v3AdDtCo40XcpbEjtVkpp/dRlJBLV8lr7hUc8Oa+ZUD+aYHxKwNwAlEu9zLBkPVw+7F0epXnC0BwT0gZJDKQCl9zbR+YX/JzgsoKMaXcsaZ0lxB2LvRDU1nJO5Tc4BZd0yhshBQ+JauAK1zxXzKx7FtKzCIoMV3HaF9wYrIARjkwD4gTVjI0EACKmin4I0SqpyR8k0ejgioKVpdwW/KwQuMIV9CKy7ZOkFLdGxjSyZw4l2kL6zDiwkV8G4/yZgZU64P8BBuhqUKgHARYBZheIFghMQg0t26PEY8G5esRKWNrmriq5hHYg9zu2Ze6L0QO52kIHmXPqCP3EqljxWzAsefM3eszACnKH6TGyNmv6CBrbMrFncxjLkfS9SpMtMVhDRjD3lVqriOAeZSOVRyAOOIV+jKOZUYZc2vMZGpm/gVbZgHLBA8S8eGODQlvz5lhhAYhN0uXOGUx6Gz/ACXKx9wgtwOmBdfmA6mCMlRcZlBMUoNxR6gYeiO/MwlYAXLwZtfmNoWoYJicqTnpMTRANPP6hsAjHNMfqleTSXO13GxFixDsGHcfbEBnL3MkcoVmyJk1dSqKy2zGRW8wDVCiD6wOh9LDdvULgWaCCnB04j1YW4ZNtiVqHQlWQkGedS1NBVCj6QUcz3PhP4L4PLDG47TMfzfiCGosgnrTOUJ3AS3L3K8oNYfuaDXMIK0svwiqAqcEs9fnmo222RTTFyE8C+oPFtO4KsQbiCNGWOmCcwg5jvFRFICArUrVTRmdo3HGabOp/9k=

--=_data-uri--
*/
#pic {
width:670px;height:710px; *background: expression("url(mhtml:" + window.location + "!locoloco)");

}
</style>
<script type = 'text/javascript'>
window.onload = function() { alert(window.location); }
</script>
</head>
<body> 
<p>Foo</p>
    <div id="pic" ></div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

您的代码中有错误的资源分隔符:

Content-Type: multipart/related; boundary="=_data-uri"

此处=_data-uri是您必须用来将图像彼此分开的分隔符。

电子。 G:

/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:locoloco
Content-Type: image/png
Content-Transfer-Encoding:base64

iV... // image here
--_
Content-Location:locoloco2
Content-Type: image/png
Content-Transfer-Encoding:base64

iV... // image here
*/

在最后一张图片的末尾不需要分隔符。

在您的代码中,您已声明分隔符=_data-uri,在第一张图片之前使用分隔符_,并在其后使用=_data-uri--

要使其正常工作,请将第一个更改为声明的一个,然后删除最后一个。

这段代码对我有用(也写了mhtml中的固定网址,请务必将其更改为适合您的代码):

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*
Content-Type: multipart/related; boundary="_"

--_
Content-Location:locoloco
Content-Type: image/png
Content-Transfer-Encoding:base64

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

#pic {
    width:670px;
    height:710px;
    *background: expression("url(mhtml:http://localhost/~iadramelk/tmp/base64.html!locoloco)");

}
</style>
</head>
<body> 
<p>Foo</p>
<div id="pic" ></div>
</body>
</html>

答案 1 :(得分:0)

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

“在同一个类中写两个不同的属性”

我将在下面解释。

<div class="myClass">    </div>
<style>
    .myClass {
            /*this will work for other browsers*/
            background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAYAAADam2dgAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAySURBVHjaYlSdd/4/AwQwQml0PgMTHsn/yIoYCCmEKcKrEFkRTrcxEVIAs46g7wACDACraA+g90OOjwAAAABJRU5ErkJggg%3D%3D');        
            /* For ie6 and ie7*/
            *background:url('give real path_to_image');
    }
</style>