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. 在线office文档编辑NTKO使用心得

    目录 前言 什么是ntko 准备工作 实战演练 总结 一.前言 Web开发中经常需要用到在线处理office文档的功能,现在市面上有一些常用的Web页面调用显示Office的控件技术,用起来很方便.有 ...

  2. C语言函数名与函数指针详解

    一.通常的函数调用 一个通常的函数调用的例子: /* 自行包含头文件 */ void MyFun(int x); /* 此处的声明也可写成:void MyFun(int) */ int main(in ...

  3. CSS中:visited的隐私保护

    CSS 伪类 (Pseudo-classes) 锚伪类:在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态. a:lin ...

  4. ContextMenu控件引用以及不用v4包的方法

    最近想撸个APP出来玩玩,本想用Yalantis出的SideMenu,结果因为依赖问题放弃了,改用他们家的ContextMenu. 如果你用了v4包 那么问题就比较简单了,直接打开项目中app中的bu ...

  5. [Android ADB] An auto-input method for Android and Windows

    The Valentine's Day is coming. Here is an auto-input method and you may use it to send multiple word ...

  6. int装箱比较

    看过Effctive-java 这本书的人多少都会记得,int类型的值,-128到127之间的数,会进行缓存. 所以在心间装箱对象 new Integer()的时候,如果在此范围则不会新建对象而是使用 ...

  7. PHP 中使用 Composer

    在线安装版本: http://www.phpcomposer.com/ 这个是国内的composer网站 thinkphp5自带了composer.phar组件,如果没有安装,则需要进行安装 以下命令 ...

  8. CSS3高级选择器

    CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说 为了更直观的了解 我们以这段为实例 来进行操作 <!DOCTYPE ...

  9. C#类详解

    类: 类是一种数据结构,它可以包含数据成员(常数和字段).函数成员(方法.属性.事件.索引器.运算符实例.构造函数静态构造函数和析构函数),以及嵌套类型.类类型支持继承,继承是一种机制,它使派生类可以 ...

  10. java测试之文件操作

    package filestream; import java.io.File; public class FileTester { public static void main(String [] ...