2016-06-08 3 views
2

У меня есть div #service_wrap, у него есть изображение, которое должно покрывать 100% ширину страницы, которая отлично работает в firefox, chrome и edge. Но IE 11 центрирует изображение и не покрывает div

Что такое IE-эквивалент размера фона: обложка;IE11 wont 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

Если вставить следующий код в веб-страницу на 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; 
 
} \t 
 
</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>

+0

Но 'фон-размер: обложка' работает в IE11, поэтому у вас должно быть что-то еще не так. – LGSon

+0

не в Windows 10 с использованием браузера ie 11. – jlitt1

+0

Я нахожусь в Win 10 с помощью IE11, и он отлично работает – LGSon

ответ

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

зафиксировал проблему. Код будет работать на локальной машине, jfiddle и codepen, но при загрузке сайта вышеуказанный код необходимо добавить для правильного отображения.

+0

В моем случае проблема связана с SVG. Дайте ему ширину и высоту. См. Этот ответ: https://stackoverflow.com/questions/21840551/background-size-with-svg-squished-in-ie9-10 – Rokit