满心欢喜地写代码,最后测试兼容性的时候发现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. Spring还使用基于 JSR-250 注释,它包括 @PostConstruct, @PreDestroy 和 @Resource 注释

    @PostConstruct 和 @PreDestroy 注释: 你可以使用 @PostConstruct 注释作为初始化回调函数的一个替代,@PreDestroy 注释作为销毁回调函数的一个替代,其 ...

  2. Java的内存机制详解

    Java把内存分为两种:一种是栈内存,另一种是堆内存.在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配,当在一段代码块定义一个变量时,Java 就在栈中为这个变量分配内存空间, ...

  3. mac 下安装securecrt

    下载文件链接中附带的文件. 1.先找到secureCRT的包内容,进入MACOS文件夹.替换crack中的secureCRT文件. 2.断网.进入软件,显示你的验证码过期.点continue.选择手动 ...

  4. PDCA循环原理

    1.PDCA循环原理:plan  do  check action 以pdca质量环模型为质量控制和保证的理论依据,对软件质量进行把控. plan计划阶段:项目质量规划 1.分析现状,找出质量问题 2 ...

  5. Spring定时任务解决博客缓存数据更新问题

    最近在做博客系统的时候,由于很多页面都有右边侧边栏,内容包括博客分类信息,归档日志,热门文章,标签列表等,为了不想每次访问页面都去查询数据库,因为本身这些东西相对来说是比较固定的,但是也有可能在网站后 ...

  6. Office 365开发环境概览

    本文于2017年3月26日首发于LinkedIn,原文链接请参考这里 本系列文章已经按照既定计划在每周更新,此前的几篇文章如下 Office 365 开发概览系列文章和教程 Office 365开发概 ...

  7. oracle物理视图(转)

    近期根据项目业务需要对oracle的物化视图有所接触,在网上搜寻关于这方面的资料,便于提高,整理内容如下: 物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普 ...

  8. POJ1275出纳员的雇佣【差分约束】

    出纳员的雇佣 Tehran的一家每天24小时营业的超市,需要一批出纳员来满足它的需要.超市经理雇佣你来帮他解决问题:超市在每天的不同时段需要不同数目的出纳员(例如:午夜时只需一小批,而下午则需要很多) ...

  9. 【转】Android常用工具类

    主要介绍总结的Android开发中常用的工具类,大部分同样适用于Java. 目前包括HttpUtils.DownloadManagerPro.ShellUtils.PackageUtils.Prefe ...

  10. 【转】如何实现Flex页面跳转

    其实对于这个题目是不恰当的,因为flex中是没有页面这个概念的,页面在flex里面其实就是一个个的Canvas,vbox,hbox等等之类的东西,看到的不同页面的切换,就是这些元素一层层的堆积,或者替 ...