在工作中碰到一个问题：background-size是css3的新属性，当在IE8及其以下浏览器中不起作用，导致背景图片不能自适应元素的大小？

先看一个小demo:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .img{

            width:300px;

            height: 300px;

            border:1px solid #000;

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

            background-size: cover; //IE8下此属性失效

        }

    </style>

</head>

<body>

<div class="img"></div>

</body>

</html>

上面的代码在IE8以上，谷歌火狐等浏览器下，图片自适应铺满div元素，在IE8下只显示图片的一部分，解决办法如下：

解决办法1：引入jquery.backgroundcover.js 文件（下载地址：https://www.npmjs.com/package/jquery-backgroundcover），代码如下

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .container{

            width:300px;

            height: 300px;

            border:1px solid #000;

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

            background-size: cover;

        }

    </style>

    <script src="js/jquery-1.8.2.min.js" ></script>

    <script src="js/jquery.backgroundcover.min.js"></script>

</head>

<body>

<div class="container"></div>

<script>

    $('.container').backgroundcover({

        safearea: "50%,50%,50%,50%"

    })

</script>

</body>

</html>

解决办法2：backgroundsize.min.htc（一个国外人写的小插件,下载地址：http://www.dowebok.com/139.html）代码如下

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .container{

            width:300px;

            height: 300px;

            border:1px solid #000;

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

            background-size: cover;

            -ms-behavior: url(css/backgroundsize.min.htc);//url中是文件的地址

            behavior: url(css/backgroundsize.min.htc);

        }

    </style>

</head>

<body>

<div class="container"></div>

</body>

</html>

解决办法3：变相的绕过background-size属性，用绝对定位修改代码，也可以达到那种效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .container{

            width:300px;

            height: 300px;

            border:1px solid #000;

            position: relative;

        }

        .container img{

            position: absolute;

            top:0;

            left:0;

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

<div class="container">

    <img src="img/timg.jpg" alt=""/>

</div>

</body>

</html>


												


											
兼容性问题：backgroud-size支持IE8浏览器的方法的更多相关文章
	

    
								
  1. 让bind函数支持IE8浏览器的方法
		
    bind函数在IE8下是不支持的,只需要在你的js文件中加入如下代码就可以支持IE8 //让bind函数支持IE8 if (!Function.prototype.bind) { Function.p ...
    
		
    2. 
						
  2. Bootstrap3适配IE8浏览器的方法
		
    <!--[if lte IE 8]> <script src="js/respond.min.js"></script> <script  ...
    
		
    3. 
						
  3. 让IE6/IE7/IE8浏览器支持CSS3属性
		
    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...
    
		
    4. 
						
  4. 浅谈如何让 Bootstrap 3兼容IE8浏览器
		
    Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.-- Bootstrap 官网 Bootstrap 来自 Twitter,是目前最 ...
    
		
    5. 
						
  5. Jquery3.x高版本支持IE8
		
    最近在做项目的时候,遇到一个安全漏洞的问题 检测到目标站点存在javascript框架库漏洞 解决办法是 将受影响的javascript框架库升级到最新版本. 好吧,就给你升吧,升完之后,我的天啊,尽 ...
    
		
    6. 
						
  6. #include <objsafe.h>//OCX控件在IE8浏览器下不能使用问题
		
    一.OCX控件开发常见的问题 1.OCX控件在IE8浏览器下不能使用问题 原因:IE8会拦截OCX控件的方法. 解决方法:在OCX控件开发时加入安全接口. (1)在有"Crtl"字 ...
    
		
    7. 
						
  7. 【转】让Bootstrap 3兼容IE8浏览器
		
    FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
    
		
    8. 
						
  8. 让Bootstrap 3兼容IE8浏览器
		
    最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
    
		
    9. 
						
  9. bootstrap3 兼容IE8浏览器
		
    近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 树莓派MQTT客户端搭建
			
    树莓派安装和实现MQTT协议 下载Mosquitto 更新软件源:sudo apt-get  update 下载g++编译器:sudo apt-get install g++ 安装:sudo apt- ...
    
			
    2. 
						
  2. Java之单元测试工具（Junit）
			
    Junit是Java单元测试框架,一般Eclipse里面会集成这个Junit4测试工具 既然是测试工具,虽然开发用得比较多,但作为测试人员也需要具备会Junit测试的思想,况且技多不压身 这里简单介绍 ...
    
			
    3. 
						
  3. 使用C# (.NET Core) 实现迭代器设计模式 (Iterator Pattern)
			
    本文的概念来自深入浅出设计模式一书 项目需求 有两个饭店合并了, 它们各自有自己的菜单. 饭店合并之后要保留这两份菜单. 这两个菜单是这样的: 菜单项MenuItem的代码是这样的: 最初我们是这样设 ...
    
			
    4. 
						
  4. Linux 下 Shell 的自动交互
			
    在编写脚本的时候经常会遇到这种情况,某些程序的命令执行的之后可能会要求用户进行输入,这个时候就需要一些特殊写法来应对这种问题了.这里参考 这篇文章提到可以使用 delimiter 分界符来解决. 也就 ...
    
			
    5. 
						
  5. Android--解析XML之PULL
			
    前言 在上一篇博客已经介绍了Android解析XML的几种方式,分别有:SAX.DOM.PULL.详细的可以看看上一篇博客:http://www.cnblogs.com/plokmju/p/andro ...
    
			
    6. 
						
  6. ubuntu mysql Access denied for user root@localhost
			
    解决办法: 1. vim mysqld.cnf  路径:/etc/mysql/mysql.conf.d 在[mysqld]下添加skip-grant-tables 2. 重启mysql服务 servi ...
    
			
    7. 
						
  7. ZOJ Problem Set - 2397 Tian Ji -- The Horse Racing
			
    #include<iostream> #include<cmath> #include<algorithm> #define REP(i,n) for(int i= ...
    
			
    8. 
						
  8. vue路由对不同界面进行传参及跳转的总结
			
    最近在做一个公众号的商城项目,主要用的VUE+MUI,其实今天这个点对于有过项目经验的前端工作者来说是最基础的,但也是必须要掌握的,今天小编主要是记录下传参和跳转的一些总结(仅供参考). 首先我们先上 ...
    
			
    9. 
						
  9. SpringBoot2.0源码分析（四）：spring-data-jpa分析
			
    SpringBoot具体整合rabbitMQ可参考:SpringBoot2.0应用(四):SpringBoot2.0之spring-data-jpa JpaRepositories自动注入 当项目中存 ...
    
			
    10. 
						
  10. 【整理】WDK 和 DDK异同
			
    WDK和DDK的作用 开发WINDOWS下的驱动程序,需要一个专门的开发包,如:开发JAVA程序,我们可能需要一个JDK,开发 WINDOWS应用程序,我们需要WINDOWS的SDK,现在开发WIND ...
    
			
    11.