ie8兼容background-size属性
满心欢喜地写代码,最后测试兼容性的时候发现Logo图片在IE8下特别大。明显是background-size在ie8一下不兼容。

我懂得,IE8还是个孩子,我就加几句你独有的代码让你兼容吧,司空见惯了:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/logo.png', sizingMethod='scale');
然后发现logo变得十分华丽(奥义·双重logo):

明显是ie8两种background属性设置都同时支持,把一个图片加载了两次。以前没有发现,是因为以前的图片并不透明,兼容语句引入的图片完美覆盖原来的图片,所以没有发现问题。现在的logo图片背景图片是透明的,所以叠一起了。
因此我们引用另外一种方法,引入火腿肠文件(.htc)来进行hack,强行让ie8支持background-size属性。简单来说,就是引入js文件来对图片大小进行配置。
使用的htc文件的background-size-polyfill项目git地址:https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc
然后在css文件里面引用语句,注意url是相对于引用css文件的html的路径:
/*IE8 图片透明不可用filter*/
-ms-behavior: url(../htc/backgroundsize.min.htc);
behavior:url(../htc/backgroundsize.min.htc);
破费解决!小僵尸你学到了吗!

ie8兼容background-size属性的更多相关文章
- IE8兼容placeholder的方案
用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...
- H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取
HTML5新增标签以及HTML5新增的api 1.H5并不是新的语言,而是html语言的第五次重大修改--版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...
- background相关属性
background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...
- background复合属性详解(上):background-image
background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...
- ie8兼容
最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C/ ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- IE8兼容border-radius.
我们知道,CSS3新增的很多简洁优美的属性,比如border-radius.box-shadow.border-image.gradients.RGBA...因为这些属性的出现,我们可以很方便的就写会 ...
- ie8兼容圆角
ie8兼容圆角 PIE.HTC下载地址:http://css3pie.com/ 兼容ie8 代码如下: <!DOCTYPE html> <html> <head> ...
- ie8兼容视频播放的探索(探索过程稍微有点长,时间紧迫和耐心稍微差一点点的小伙伴直接往下拉)
需求: 前几天接到一个需求,需要在网页中嵌入视频,并且要兼容ie8:然后我就开始了如下的探索...... 探索过程: 我先思考有什么方法可以在网页中嵌入视频,然后找到2种常用的方法——video标签和 ...
- prototype.js的Ajax对IE8兼容问题解决方案
你是否遇到过这样的问题?在使用protype.js的Ajax应用时,会出现这样的问题:只要调用了Ajax.Request,然后点该页面右键,查看“属性”就弹出“IE停止工作”的对话框,然后强制重新加载 ...
随机推荐
- 如何修改SVN客户端中保存的密码
本文主要讲述Linux命令行下怎么修改已经保存的客户端密码: 第一步,删除 subvision文件: rm -rf ~/.subvision 第二步:执行任意需要访问服务器的svn命令,会提示是否永久 ...
- idea调试SpringMvc, 出现:”通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明“错误的解决方法
调试json格式输出,出现以下错误: HTTP Status 500 - Servlet.init() for servlet HelloDispatcher threw exception ty ...
- Spark(开课吧笔记)
2016.07.14 1-Spark实战演练:Spark概述及生态环境 2.Spark实战演练:Spark vs Hadoop MapReduce 任意一条边有方向且不存在环路的图,一次执行所 ...
- Dive in python Chapter4 实例
def info(object,spacing=10,collapse=1): """Print methods and doc strings. Takes modul ...
- 从编译安装Keepalived 到 配置 负载均衡(LVS-DR)
最近在研究服务器高可用集群 (HA)…… Keepalived 是用C写的软路由.提供负载均衡与高可用特性. 负载均衡利用IPVS技术 高可用通过VRRP协议实现 更难能的贵的是,一直到最近还在更新 ...
- Linux之wc命令
wc - print newline, word, and byte counts for each file 为文件打印行数,字符数,字节数 参数: -l 仅列出行 -w 仅列出多少字(英文单字 ...
- Yii2中rules验证规则
required : 必须值验证属性 [['字段名'],required,'requiredValue'=>'必填值','message'=>'提示信息']; #说明:CRequiredV ...
- 腾讯云报告——MySQL成勒索新目标,数据服务基线安全问题迫在眉睫
推荐理由 大数据时代,人类产生的数据越来越多,但数据越多的情况下,也会带来数据的安全性问题,如MySQL数据库上的数据,越来越多的黑客盯上了它,今天推荐的这篇文章来自于腾讯云技术社区,主要是针对MyS ...
- linux最小安装
(1)系统安装类型选择及自定义额外包组 进入如图2-28所示界面.上半部分是系统定制的不同的系统安装类型选择项,默认是“Desktop”,这里我们选择“Minimal”,即最小化安装,下半部分是在上面 ...
- CSS前端开发学习总结、一
1. 属性选择器: 2. CSS伪类选择器: 3. CSS伪元素: 4. CSS优先级: 5. 行内标签: 6. 块级标签: 7. Display: 8. Line-height:行高 9. text ...