IE11不会背景尺寸:封面 [英] IE11 wont background-size: cover
问题描述
我有一个div #service_wrap，它的图像应覆盖页面的100％宽度，在Firefox，chrome和edge中可以正常工作.但是IE 11会将图像居中，而不会覆盖div
IE相当于background-size:cover;
I have a div #service_wrap it has an image that should cover 100%width of the page it works fine in firefox,chrome and edge. But IE 11 it centers the image and does not cover the div
What is the IE equivalent of 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
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上的网页，则不会使用全角
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>
推荐答案
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
解决了该问题. 代码可以在本地计算机，jfiddle和codepen上工作，但是在上载网站时，需要添加以上代码才能正确显示.
fixed the issue. Code would work on local machine,jfiddle and codepen but when uploading the site the above code needed to be added to display correctly.
这篇关于IE11不会背景尺寸:封面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
