2017.7.5更新：

在处理IE8兼容性问题上，对于背景图片比背景框还大的情况，还需要做一下处理：

 /*针对IE8的hack，目的是除掉之前background*/

                 background:none\9;

根据canius（http://caniuse.com/#search=background-size），background-size兼容性为IE9以及以上浏览器，如下图所示。

实例代码：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>background-size 兼容性处理</title>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             .parent {

                 width: 400px;

                 height: 400px;

                 margin: 100px;

                 border: 1px solid red;

                 background: url(img/aaa.jpg) no-repeat center center;

                 background-size: 100% 100%;

             }

         </style>

     </head>

     <body>

         <div class="parent">

         </div>

     </body>

 </html>

效果：

（1）chrome浏览器：

（2）IE8浏览器：

兼容性方案：

使用filter属性：

.parent {

                width: 400px;

                height: 400px;

                margin: 100px;

                border: 1px solid red;

                background: url(img/aaa.jpg) no-repeat center center;

                background-size: 100% 100%;

                /*针对IE8的hack，目的是除掉之前background*/

                background: none\9;

                /*下一行为关键设置*/

                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');

            }

IE8浏览器效果：

原理：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 true：默认值。滤镜激活。 false：滤镜被禁止。

sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop：剪切图片以适应对象尺寸。 image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale：缩放图片以适应对象的尺寸边界。

src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

background-size IE8兼容方案的更多相关文章

  1. Nerv --- React IE8 兼容方案

    创建项目 创建一个目录,使用npm快速初始化 $ mkdir my-project && npm init -y 安装依赖 安装webpack以及babel $ npm install ...

  2. 让IE8支持HTML5及canvas功能！chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  3. css3兼容IE8的方案 各个ie的hack

    虽然现在很多项目已经对低版本IE不要求了,但是还有部分公司对IE8还是很执着的,咱作为屌丝前端程序员不能和老板说前端潮流,不能说趋势,只能动脑子了,下面就分享一些css3兼容ie8的方案思路.主要是实 ...

  4. IE8兼容placeholder的方案

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

  5. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  6. border-radius IE8兼容处理

    根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示: 测试代码: <!DOCTYPE html&g ...

  7. box-shadow IE8兼容处理

    根据canisue(http://caniuse.com/#search=box-shadow),box-shadow兼容性如下图所示: 测试代码: <!DOCTYPE html> < ...

  8. Web前端页面的浏览器兼容性测试心得（三）总结一些IE8兼容问题的解决方案

    由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法. 最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容 ...

  9. react 开发 PC 端项目（一）项目环境搭建 及 处理 IE8 兼容问题

    步骤一:项目环境搭建 首先,你不应该使用 React v15 或更高版本.使用仍然支持 IE8 的 React v0.14 即可. 技术选型: 1.react@0.14 2.bootstrap3 3. ...

随机推荐

  1. Hadoop权威指南:通过FileSystem API读取数据

    Hadoop权威指南:通过FileSystem API读取数据 [TOC] 在Hadoop中,FileSystem是一个通用的文件系统API 获取FileSystem实例的几个静态方法 public ...

  2. Superwebsocket 模拟微信聊天室

    在园子里潜水几年了,工作以来算是有些积累,突然想写点东西方便以后温故而知新,希望自己能够坚持下去. 关于Superwebsocket的介绍我就不多说了,请点击:http://www.cnblogs.c ...

  3. Linux驱动技术(四) _异步通知技术

    异步通知的全称是"信号驱动的异步IO",通过"信号"的方式,放期望获取的资源可用时,驱动会主动通知指定的应用程序,和应用层的"信号"相对应, ...

  4. vue2重写饿了么

    构建 vue有自己的脚手架构建工具vue-cli,使用起来非常方便,使用webpack来集成各种开发便捷工具,比如: 代码热更新,修改代码之后网页无刷新改变,对前端开发来说非常的方便 PostCss, ...

  5. 众人拾柴火焰高之Tomcat集群

    一人拾柴火不旺,众人拾柴火焰高.Tomcat服务器也是一样,一台服务器再强大能承受的访问也是有限的.要提供高并发.高可用的服务,就必须横向扩展,多台Tomcat组成一个集群,根据实际的访问量动态增减服 ...

  6. 安卓TCP通信版本2

    PC做服务器,安卓做客户端. 安卓获取输入框的内容并发送,然后等待接收服务器的消息 服务器先行开启,接收到客户端的数据,然后回复消息. 实现了对线程类的封装,通过按钮启动线程发送并接收 服务器代码(j ...

  7. mysql远程连接权限

    环境:mysql6.0 .Navicat Premium 用户名:root 密码:123456  本地连接无问题 远程连接mysql的时候应该碰到Navicat Premium 报错. 错误代码是11 ...

  8. linux c++ 加载动态库常用的三种方法

    链接库时的搜索路径顺序:LD_LIBRARY_PATH --> /etc/ld.so.conf --> /lib,/usr/lib 方法1. vi .bash_profile    设置环 ...

  9. Linux CentOS下MySQL的安装配置之浅谈

    前期必备安装:VMware虚拟机,CentOS镜像[注意:Linux下使用CentOS   MySQL是不用在官网下载的,只需要配置就OK了] 下面开始正式操作: //CentOS安装MySQL之浅谈 ...

  10. Java基础之路(一)下--引用数据类型之数组

    上次我们说了java的基础数据类型,今天我们就来说一下引用数据类型中的数组. 什么是数组 数组:存储在一个连续的内存块中的相同数据类型(引用数据类型)的元素集合. 数组中的每一个数据称之为数组元素,数 ...