满心欢喜地写代码,最后测试兼容性的时候发现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属性的更多相关文章

  1. IE8兼容placeholder的方案

    用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...

  2. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  3. background相关属性

    background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...

  4. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  5. ie8兼容

    最近在做ie8兼容,把遇到的问题整理了一下 1. margin:0 auto; 无法居中 解决方法:1.换成h4的文档类型 <!DOCTYPE html PUBLIC "-//W3C/ ...

  6. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  7. IE8兼容border-radius.

    我们知道,CSS3新增的很多简洁优美的属性,比如border-radius.box-shadow.border-image.gradients.RGBA...因为这些属性的出现,我们可以很方便的就写会 ...

  8. ie8兼容圆角

    ie8兼容圆角 PIE.HTC下载地址:http://css3pie.com/ 兼容ie8 代码如下: <!DOCTYPE html> <html> <head> ...

  9. ie8兼容视频播放的探索(探索过程稍微有点长,时间紧迫和耐心稍微差一点点的小伙伴直接往下拉)

    需求: 前几天接到一个需求,需要在网页中嵌入视频,并且要兼容ie8:然后我就开始了如下的探索...... 探索过程: 我先思考有什么方法可以在网页中嵌入视频,然后找到2种常用的方法——video标签和 ...

  10. prototype.js的Ajax对IE8兼容问题解决方案

    你是否遇到过这样的问题?在使用protype.js的Ajax应用时,会出现这样的问题:只要调用了Ajax.Request,然后点该页面右键,查看“属性”就弹出“IE停止工作”的对话框,然后强制重新加载 ...

随机推荐

  1. 如何修改SVN客户端中保存的密码

    本文主要讲述Linux命令行下怎么修改已经保存的客户端密码: 第一步,删除 subvision文件: rm -rf ~/.subvision 第二步:执行任意需要访问服务器的svn命令,会提示是否永久 ...

  2. idea调试SpringMvc, 出现:”通配符的匹配很全面, 但无法找到元素 'mvc:annotation-driven' 的声明“错误的解决方法

    调试json格式输出,出现以下错误: HTTP Status 500 - Servlet.init() for servlet HelloDispatcher threw exception   ty ...

  3. Spark(开课吧笔记)

    2016.07.14 1-Spark实战演练:Spark概述及生态环境 2.Spark实战演练:Spark vs Hadoop MapReduce     任意一条边有方向且不存在环路的图,一次执行所 ...

  4. Dive in python Chapter4 实例

    def info(object,spacing=10,collapse=1): """Print methods and doc strings. Takes modul ...

  5. 从编译安装Keepalived 到 配置 负载均衡(LVS-DR)

    最近在研究服务器高可用集群 (HA)…… Keepalived 是用C写的软路由.提供负载均衡与高可用特性. 负载均衡利用IPVS技术 高可用通过VRRP协议实现 更难能的贵的是,一直到最近还在更新 ...

  6. Linux之wc命令

    wc - print newline, word, and byte counts for each file 为文件打印行数,字符数,字节数 参数: -l  仅列出行 -w  仅列出多少字(英文单字 ...

  7. Yii2中rules验证规则

    required : 必须值验证属性 [['字段名'],required,'requiredValue'=>'必填值','message'=>'提示信息']; #说明:CRequiredV ...

  8. 腾讯云报告——MySQL成勒索新目标,数据服务基线安全问题迫在眉睫

    推荐理由 大数据时代,人类产生的数据越来越多,但数据越多的情况下,也会带来数据的安全性问题,如MySQL数据库上的数据,越来越多的黑客盯上了它,今天推荐的这篇文章来自于腾讯云技术社区,主要是针对MyS ...

  9. linux最小安装

    (1)系统安装类型选择及自定义额外包组 进入如图2-28所示界面.上半部分是系统定制的不同的系统安装类型选择项,默认是“Desktop”,这里我们选择“Minimal”,即最小化安装,下半部分是在上面 ...

  10. CSS前端开发学习总结、一

    1. 属性选择器: 2. CSS伪类选择器: 3. CSS伪元素: 4. CSS优先级: 5. 行内标签: 6. 块级标签: 7. Display: 8. Line-height:行高 9. text ...