IE11 不会背景大小：封面
Posted
技术标签:
【中文标题】IE11 不会背景大小：封面【英文标题】：IE11 wont background-size: cover 【发布时间】：2016-10-09 01:04:10 【问题描述】：我有一个 div #service_wrap 它有一个应该覆盖 100% 宽度的图像，它在 firefox、chrome 和 edge 中运行良好。但 IE 11 将图像居中而不覆盖 div 什么是 IE 等价于 background-size:cover;
CSS
#service_wrap
padding:0;
margin:0;
width:100%;
height:750px;
max-height:750px;
display:table;
background: url(../images/service_header.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
<div id="service_wrap" >
<div id="service_top" >
<h1>WE WORK CLOSELY WITH OUR PARTNERS TO GET YOU THE BEST SERVICE.</h1>
<h2>Click on a service below to learn more about how we partner with each one.</h2>
</div><!--service_top-->
<div id="service_bottom" >
<div class="services_holder">
<a href=""><div class="service1"></div></a><!--service1-->
<a href=""><div class="service2"></div></a><!--service2-->
<a href=""><div class="service3"></div></a><!--service3-->
<a href=""><div class="service4"></div></a><!--service4-->
<a href=""><div class="service5"></div></a><!--service5-->
<a href=""><div class="service6"></div></a><!--service4-->
<a href=""><div class="service7"></div></a><!--service5-->
</div><!--services_holder-->
</div><!--service_bottom-->
</div><!--service_wrap-->
如果您将下面的代码插入到 IE11 上的网页中，它不会使用全宽
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>this is a title</title>
<link rel="stylesheet" href="css/partners.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<style>
#service_wrap
background: url(http://test.finelinewow.com/images/partner_header.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
</style>
</head>
<body>
<!----------------------------------------------------------------service---------------------------------------------------------------->
<div id="service_wrap" >
<div id="service_top" >
<h1>WE WORK CLOSELY WITH OUR PARTNERS TO GET YOU THE BEST SERVICE.</h1>
<h2>Click on a service below to learn more about how we partner with each one.</h2>
</div><!--service_top-->
<div id="service_bottom" >
<div class="services_holder">
<a href="#liberty_towing"><div class="service1"></div></a><!--service1-->
<a href="#auto_palace"><div class="service2"></div></a><!--service2-->
<a href="#discount_auto"><div class="service3"></div></a><!--service3-->
<a href="#speedy_car"><div class="service4"></div></a><!--service4-->
<a href="#solid_insurance"><div class="service5"></div></a><!--service5-->
<a href="#sevan_auto"><div class="service6"></div></a><!--service4-->
<a href="#gray_gables"><div class="service7"></div></a><!--service5-->
</div><!--services_holder-->
</div><!--service_bottom-->
</div><!--service_wrap-->
<!----------------------------------------------------------------/service---------------------------------------------------------------->
</body>
</html>【问题讨论】：
但是background-size: cover在IE11中工作，所以你一定有其他问题
不在使用ie 11浏览器的windows 10中
我使用 IE11 在 Win 10 上运行良好
尝试背景：url(../images/service_header.jpg) no-repeat center center fixed;
它从 IE9 开始工作：caniuse.com/#feat=background-img-opts
【参考方案1】：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
解决了这个问题。 代码可以在本地机器、jfiddle 和 codepen 上运行，但是在上传站点时，需要添加上述代码才能正确显示。
【讨论】：
就我而言，问题与 SVG 有关。给它一个宽度和一个高度。看到这个答案：***.com/questions/21840551/…以上是关于IE11 不会背景大小：封面的主要内容，如果未能解决你的问题，请参考以下文章
是否有相当于背景大小的img（javascript）：封面？