`
鹤惊昆仑
  • 浏览: 229195 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使IE8以下的IE浏览器也支持图片的data协议

    博客分类:
  • CSS
阅读更多
参见http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
测试页面:http://phpied.com/files/mhtml/mhtml.html

原理是使用MHTML(Multipurpose Internet Mail Extensions HyperText Markup Language) hack
/*
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==
*/

#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;
}


好处是啥?减少HTTP请求(这些图片不会单独再发请求了)。
0
0
分享到:
评论

相关推荐

    IE6的POST请求无data的的问题

    在提供的"ieHTTPHeadersSetup.exe"文件中,可能是用于帮助开发者检查和调试IE浏览器的HTTP头部信息的工具,例如IEHTTPHeaders。这类工具能够帮助开发者查看请求和响应头,从而定位问题。 总的来说,处理IE6的POST...

    IE 6文件上传慢终极解决方案

    然而,IE6不支持多部分的HTTP请求(Multipart/form-data),这意味着整个文件会被作为请求体的一部分一次性发送,这可能导致在网络不稳定或者文件较大的情况下,上传速度显著降低。 微软官方文档(链接:...

    自己封装好的Socket控件

    然而,由于安全原因,现代浏览器已经逐渐不再支持ActiveX控件,尤其是非IE浏览器。 Socket,又称为套接字,是网络编程中的基本概念,它提供了进程间通信(IPC)的接口,让应用程序能够发送和接收数据。在TCP/IP协议...

    图片上传预览

    对于不支持File API的老版IE浏览器,如IE 6、7和8,我们需要采用不同的策略。由于这些浏览器不支持`FileReader`,我们可以利用`ActiveXObject`来实现文件读取。创建一个`ActiveXObject`实例,如`new ActiveXObject(...

    模拟ie发送http消息

    在模拟IE时,User-Agent字段应设置为IE浏览器的标识,以模仿真实的IE请求。 2. **设置请求方法**:常见的HTTP请求方法有GET、POST、PUT、DELETE等。根据实际需求选择合适的方法。例如,获取网页内容通常使用GET,...

    K40IE网络控制器

    标题中的“K40IE网络控制器”指的是计算机硬件的一部分,主要功能是负责处理网络连接的设备。在Windows XP操作系统中,网络控制器是确保电脑能够接入并通信的关键组件。它允许用户通过有线或无线方式连接到互联网,...

    服务器推送示例-支持IE火狐谷歌等

    这个系统利用ASP.NET和SignalR的强大功能,为用户提供实时的数据更新,无论他们使用的是IE、火狐还是谷歌浏览器。不过,实际的项目开发中,还需要考虑错误处理、连接管理和性能优化等问题,确保系统的稳定性和可扩展...

    COM接口调用IE工作的例子

    在“COM接口调用IE工作的例子”中,我们的目标是利用IE浏览器作为工具,完成数据处理任务。IE提供了一组称为“WebBrowser”对象的COM接口,允许开发者在代码中控制浏览器的行为,例如导航到特定URL、加载HTML、执行...

    ie打开word,excle

    这里提供的代码片段展示了如何使用Java来实现一个简单的功能,让用户通过IE浏览器下载一个Word(.doc)或Excel(.xls)文件。这个过程涉及到Web服务器与客户端之间的数据传输,主要依赖于HTTP协议和Java的Servlet...

    winsocket协议[参考].pdf

    当创建LR脚本时,VUGEN(Virtual User Generator)会捕捉如IE浏览器发出的HTTP请求。LR支持多种协议,如Oracle、ODBC等。然而,如果LR不直接支持特定的协议,或者你需要测试的应用程序使用了自定义的通信方式,你...

    asp在IE浏览器中下载服务端上的各类文件的实现方法

    ASP(Active Server Pages)是一种微软开发的服务器端脚本语言,常用于构建动态网页。...通过以上步骤,ASP可以在IE浏览器中实现文件的下载功能,不仅限于文本文件,也包括图片、音频、视频等多种类型的文件。

    用IE的Web服务建立ASP.NET应用程序

    3. **IE中的Web服务支持**:IE浏览器提供了对Web服务的支持,使得前端脚本可以直接访问后端提供的Web服务,这对于构建富互联网应用程序(RIA)非常有用。 #### 实现Web服务访问的关键技术 - **SOAP协议**:SOAP是...

    IE仿程序

    IE7的一个重要特性是它对CSS2.1的支持,以及对部分CSS3属性的初步支持。在C#项目中,开发者需要构建一个渲染引擎,能够理解并应用这些样式规则,这可能涉及到解析CSS文件,构建样式规则树,并将其应用到HTML元素上。...

    createObjectURL方法实现本地图片预览

    比如,在IE浏览器中,如果用户代理字符串包含“MSIE”,则会使用AlphaImageLoader滤镜加载图片。在Firefox等其他浏览器中,则可以直接使用createObjectURL方法。 ### 6. 内存管理 使用createObjectURL方法生成的...

    ie发送ajax请求返回上一次结果的解决方法

    为了解决IE中AJAX请求返回上一次结果的问题,我们可以采取以下两种方法: 1. **添加动态参数**: 一个简单而有效的方法是在请求的URL后面添加一个随机或者时间戳参数。例如,可以在JavaScript中使用`Math.random()...

    MapGuide技术分析

    AJAX Viewer则支持Firefox和Opera等非IE浏览器,扩大了用户群体。 3. **多数据格式支持**:MapGuide借助FDO(Feature Data Object)来访问数据,支持如sdf、shp、Oracle、SQL Server、WFS和WMS等多种数据源,确保了...

    WebSocket兼容到低版本浏览器

    由于旧版本的浏览器(如IE8、9,早期版本的Firefox、Chrome)不支持WebSocket,我们需要寻找替代方案。一种常见的解决方法是使用Flash Socket或JSONP(JSON with Padding)来模拟WebSocket的功能。 1. Flash Socket...

    JavaScript调用WebService实例总结

    JavaScript通过XMLHttpRequest对象或者ActiveXObject(在旧版IE浏览器中)来实现对WebService的调用。在示例中,使用了ActiveXObject,这是IE浏览器特有的,它创建了一个XMLDOM对象,用于加载和处理XML数据。 2. ...

    webaccess培训教程

    WebAccess是由研华科技(Advantech)开发的一款基于IE浏览器的HMI(Human Machine Interface,人机界面)/SCADA(Supervisory Control and Data Acquisition,监控与数据采集)软件。该软件的核心优势在于其完全网络化...

Global site tag (gtag.js) - Google Analytics