Question

我有一个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;
}

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

如果您将以下代码插入IE11上的网页，则不会使用全宽

＆＃13;

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

＆＃13;

Answer 1

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

解决了这个问题。代码可以在本地机器，jfiddle和codepen上工作，但在上传网站时，需要添加上述代码才能正确显示。

IE11不会背景大小：封面

1 个答案: