在工作中碰到一个问题：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. C/C++结构体成员偏移量获取
			
    分析代码节选自muduo. 以下代码通过offsetof获取sin_family在sockaddr_in6中的字段偏移量. static_assert(offsetof(sockaddr_in6, s ...
    
			
    2. 
						
  2. 异步请求中jetty处理ServletRequestListener的坑
			
    标题起得比较诡异,其实并不是坑,而是jetty似乎压根就没做对异步request的ServletRequestListener的特殊处理,如果文中有错误欢迎提出,可能自己有所疏漏了. 之前遇到了一个b ...
    
			
    3. 
						
  3. 【ABP框架系列学习】模块系统(4)之插件示例开发
			
    0.引言 上一篇博文主要介绍了ABP模块及插件的相关知识,本章节主要开发一个插件示例来学习如何创建一个插件,并在应用程序中使用.这个命名为FirstABPPlugin的插件主要在指定的时间段内删除审计 ...
    
			
    4. 
						
  4. 三方面搞定http协议之“请求方法”
			
    我所熟知的请求方法一共有六种: GET 请求指定的页面信息,并返回实体主体. POST 向指定资源提交数据进行处理请求(例如提交表单或者上传文件) PUT 从客户端向服务器传送的数据取代指定的文档的内 ...
    
			
    5. 
						
  5. 函数式编程之-模式匹配(Pattern matching)
			
    模式匹配在F#是非常普遍的,用来对某个值进行分支匹配或流程控制. 模式匹配的基本用法 模式匹配通过match...with表达式来完成,一个完整的模式表达式长下面的样子: match [somethi ...
    
			
    6. 
						
  6. tomcat没有编译重新编写的代码
			
    今天在工作的时候,我把项目的mapper.xml的的sql语句改了,但是在启动项目,在页面访问数据的时候,发现控制打印出来的sql语句还是原来的,没有改过来. 在tomcat里找到我的代码,找到我修改 ...
    
			
    7. 
						
  7. Go语言学习笔记(六) [包]
			
    日期:2014年7月30日   1.定义:包时函数和数据的集合.使用package关键字定义一个包,文件名不需要与包名一致,包名约定使用小写字符,Go包可以由多个文件组成,但是需要使用相同的packa ...
    
			
    8. 
						
  8. PHP学习笔记（3）-Zend Studio安装和汉化
			
    下载 因为FQ也慢,所以还是在百度软件中心下载快一些.地址:http://rj.baidu.com/soft/detail/15423.html?ald 因为下载不是最新版本,虽然因为强迫症FQ在官网 ...
    
			
    9. 
						
  9. MEF 基础简介 二
			
    MEF的导出(Export)和导入(Import) using System; using System.Collections.Generic; using System.Linq; using S ...
    
			
    10. 
						
  10. [日常]nginx与网络事件模型
			
    Nginx 的特点: 1.处理静态文件 2.反向代理加速 3.fastCGI,简单的负载均衡和容错 4.模块化的结构 5.分阶段资源分配技术,使得它的 CPU 与内存占用率非常低,保持 10,000  ...
    
			
    11.