IE11不支持background-size: cover属性

5
我有一个div #service_wrap,其中包含一张图片,应该覆盖整个页面的宽度,在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;
}

html

<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-->

firefox

IE11

If you insert the code below into a webpage on IE11 it does not use the full width

<!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中是有效的,因此你肯定有其他错误。 - Asons
不在 Windows 10 中使用 IE 11 浏览器。 - jlitt1
我正在使用Win10和IE11,一切都很正常。 - Asons
尝试使用 background: url(../images/service_header.jpg) no-repeat center center fixed; - Naga Sai A
1
它可以在IE9及以上版本中正常工作:http://caniuse.com/#feat=background-img-opts - Marcos Pérez Gude
显示剩余8条评论
1个回答

7
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

问题已经解决。 代码在本地机器、jfiddle和codepen上可以运行,但是上传网站时需要添加上述代码才能正确显示。


5
就我个人而言,这个问题与SVG有关。请给它一个宽度和高度。参见此答案:https://dev59.com/c2Eh5IYBdhLWcg3w9Xan - Rokit

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接