在工作中碰到一个问题：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. Python开发之---PyCharm初体验
			
    PyCharm 的初始设置(知道) 目标 恢复 PyCharm 的初始设置 第一次启动 PyCharm 新建一个 Python 项目 设置 PyCharm 的字体显示 PyCharm 的升级以及其他  ...
    
			
    2. 
						
  2. JAVA面试题-数组字符串基础
			
    1.大写的Integer和String是可变类还是不可变类?怎么定义不可变类?不可变.用final关键字,如public final class Integer extends Number 2.比较 ...
    
			
    3. 
						
  3. Docker简介以及操作
			
    Docker 简介 Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linu ...
    
			
    4. 
						
  4. 使用maven插件构建docker镜像
			
    为什么要用插件 主要还是自动化的考虑,如果额外使用Dockerfile进行镜像生成,可能会需要自己手动指定jar/war位置,并且打包和生成镜像间不同步,带来很多琐碎的工作. 插件选择 使用比较多的是 ...
    
			
    5. 
						
  5. Ocelot简易教程（二）之快速开始1
			
    Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 ...
    
			
    6. 
						
  6. 使用 pandas 导出数据
			
    import pandas as pd # In[58]: df = pd.DataFrame(houselist) # In[59]: df # In[61]: df.to_csv('lianjia ...
    
			
    7. 
						
  7. Java IO API记录
			
    文件路径: public static final String FILEPATH= File.separator+"Users"+ File.separator+"xu ...
    
			
    8. 
						
  8. 【干货】Jquery.Datables与Bootstrap3的组合使用
			
    官方地址 datatables官方网址:www.datatables.net 下载bootstrap3与datables文件包 引用文件 css:bootstrap.css.dataTables.bo ...
    
			
    9. 
						
  9. Java并发编程-AbstractQueuedSynchronizer源码分析
			
    简介 提供了一个基于FIFO队列,可以用于构建锁或者其他相关同步装置的基础框架.该同步器(以下简称同步器)利用了一个int来表示状态,期望它能够成为实现大部分同步需求的基础.使用的方法是继承,子类通过 ...
    
			
    10. 
						
  10. PPP中的PAP和CHAP的区别
			
    PAP PAP是简单认证,明文传送,客户端直接发送包含用户名/口令的认证请求,服务器端处理并回应. CHAP CHAP是加密认证,先由服务器端给客户端发送一个随机码 challenge,客户端根据 c ...
    
			
    11.