在工作中碰到一个问题：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. STL::sort函数实现
			
    声明:本文参考链接:STL::sort实现. 排序是面试中经常被问及的算法基础知识点,虽然实际应用中不会直接使用,但是理解这些简单的算法知识对于更复杂更实用的算法有一定的帮助,毕竟面试总不能问的太过深 ...
    
			
    2. 
						
  2. 【翻译】JavaScript内存泄露
			
    原文地址:http://javascript.info/tutorial/memory-leaks#tools 我们在进行JavaScript开发时,很少会考虑内存的管理.JavaScript中变量的 ...
    
			
    3. 
						
  3. vue error:The template root requires exactly one element.
			
    error:[vue/valid-template-root] The template root requires exactly one element. 原因: 因为vue的模版中只有能一个根节 ...
    
			
    4. 
						
  4. 【jQuery】(2)---Jquery过滤选择器
			
                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...
    
			
    5. 
						
  5. python通过snmp协议运用多线程获取多台主机网卡信息，写入数据库
			
    #-*- coding:utf-8 -*- import netsnmp class SnmpClass(object): """ SNMP ""&q ...
    
			
    6. 
						
  6. django 模板层排序  class Meta 添加信息
			
    class weeks(models.Model): #星期信息 stu = models.ForeignKey(students,on_delete=models.CASCADE) weeklist ...
    
			
    7. 
						
  7. Apache-Flink深度解析-概述
			
    摘要: Apache Flink 的命脉 "命脉" 即生命与血脉,常喻极为重要的事物.系列的首篇,首篇的首段不聊Apache Flink的历史,不聊Apache Flink的架构, ...
    
			
    8. 
						
  8. ClickHouse之访问权限控制
			
    研究ClickHouse也有几周了,今天来和大家说说ClickHouse的访问权限是怎么做的,ClickHouse不像MySQL那样,直接创建用户,而是需要在配置文件里面添加用户,一个简单的例子如下: ...
    
			
    9. 
						
  9. hadoop集群无法找到datanode节点问题解决
			
    问题:在配置hadoop集群时,master的50070后台中找不到slave的datanode节点怎么办? 解决: 方法一:首先确认下master和slave的hdfs-site.xml配置中的df ...
    
			
    10. 
						
  10. docker常用命令2
			
    Docker作为一种开源的.优秀的容器化技术,目前受到越来越多公司的运用,下面是我工作中常用到的一些命令. 1.删除一个容器(删除之前先要停止该容器) docker stop 容器IDdocker r ...
    
			
    11.