满心欢喜地写代码,最后测试兼容性的时候发现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. springmvc基础学习2---简单配置文件

    1:web文件 2:spring-mvc.xml配置文件

  2. 第一次"正经面试"之发现自己的缺陷和不足

    1:初试之校园招聘~~~ 如果你细心,可能发现了"正经面试"加了双引号,说起这次面试(昨天面的技术试),要从上礼拜六,距今已经一礼拜了吧.现在这个时候校园招聘已经蠢蠢欲动了吧,(说 ...

  3. JAVA基础知识(1)

    1.JAVA的三大体系:JME(微缩版),JSE(标准版),JEE(企业版): 2.JAVA的三大核心机制:JAVA虚拟机,垃圾回收机制,代码安全性检测 3.java开发集JDK 4.java编译器j ...

  4. React-native 初始化项目很慢

    我是在Mac环境下,利用facebook开源的react-native创建原生app项目缓慢的问题 一:确定自己的环境配置是否有问题 二:打开终端,输入命令行 brew install wget 点击 ...

  5. python无线网络安全入门案例

    原文链接:http://www.devx.com/security/Article/34741 翻译:诸神的黄昏 整理校对:玄魂 --- 随着⽆线⽹络在家庭和商业中的普及,新的安全挑战是⽆法避免的.保 ...

  6. Tcl与Design Compiler (十二)——综合后处理

    本文如果有错,欢迎留言更正:此外,转载请标明出处 http://www.cnblogs.com/IClearner/  ,作者:IC_learner 概述 前面也讲了一些综合后的需要进行的一些工作,这 ...

  7. 老李推荐:第14章5节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-查询ViewServer运行状态

    老李推荐:第14章5节<MonkeyRunner源码剖析> HierarchyViewer实现原理-装备ViewServer-查询ViewServer运行状态   poptest是国内唯一 ...

  8. poptest分享计划以及提供的服务

    poptest分享计划以及提供的服务 POPTEST致力于测试开发工程师的培养,能让学员经过系统培训后从事自动化测试工作,包括功能自动化.性能自动化.接口自动化以及移动端系统的自动化测试等,由于移动端 ...

  9. 各位Coder看过来

    为了丰富博客内容,也为了解决一些实际的问题,现准备出一系列博文,内容为各位回复评论指明需要的知识点,将在近期为你解决并提供还算精要的讲解:评论内容要求 Coder:+需要的技术内容.技术内容不限领域, ...

  10. 五分钟秒懂Java日志组件

    Java中有许多种日志记录方式,有些API有占位符,有些API没占位符,初学的人可能会搞不清楚这些日志组件的由来.我一开始的时候也是很懵逼的,后来一点点弄懂了于是就又了这篇文章. 在Java中进行日志 ...