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. 字体图标 轻量级 Font Awesome

    今天呢,来推荐一款请轻量级 字体图标框架.Font Awesome 用法与bootstrap相似 打开网址.download下载,然后打开取到这两个,下载点这里,这个博客弄的挺好的. 找到exampl ...

  2. .net core中加载lua脚本的类库: MoonSharp

    前言 MoonSharp是一个支持C#调用lua脚本的类库,支持.net, .net core, mono, unity,因此在.net core中也能够使用,而且加载和调用lua也很方便简单: 官网 ...

  3. [TensorFlow] Basic Usage

    Install TensorFlow on mac Install pip # Mac OS X $ sudo easy_install pip $ sudo easy_install --upgra ...

  4. WinForm 控件（下）

    10.PictureBox 外观,Image可以选择图片路径行为,SizeMode可以设置图片大小布局方式 11.Imagelist--图片集 imageList1.Images[n]; 12.not ...

  5. 编写JQuery插件-4

    封装对象方法的插件 jQuery.fn.extend() 的两种写法 以添加一个点击按钮为例: 方法一: (function ($) { $.fn.mask = function(options){ ...

  6. volatile关键字解析(转)

    volatile关键字解析 转载:http://www.cnblogs.com/dolphin0520/p/3920373.html volatile这个关键字可能很多朋友都听说过,或许也都用过.在J ...

  7. Eclipse运行时无法加载主类的解决方法

    测试代码: package javastudy; class Person { public static void main(String[] args) { PersonCeshi pp=new ...

  8. node.js 的事件机制

    昨天到今天, 又看了一边node 的事件模块,  觉得很神奇~  分享一下  - -> 首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发 ...

  9. 修改本地配置远程连接oracle数据库

    当我们需要查看数据库信息时,我们更愿意通过客户端来查看,这样不仅操作方便,而且查看更精准.那么需要远程连接数据库需要在本地修改那些配置呢?以下是我个人的经验,希望大家都指正. 1.在oracle安装目 ...

  10. Smarty3配置及入门语法

    一.Smarty3配置 下载Smarty文件 在Smarty的官方网站下载Smarty文件,解压下载到的Smarty文件,Smarty的库文件就在libs文件夹中. 我使用的PHP调试环境的程序集成包 ...