Ошибка обложки IE и фонового изображения

У меня есть Div с выложенным плиткой фоновым изображением и рамкой-изображением. Граничное изображение является прозрачным .png с угловыми рисунками, поэтому рамка с границами имеет толщину около 90px. IE запускает фоновое изображение внутри рамки, где FF, Chrome и Safari запускают фоновое изображение на внешнем краю рамки. В IE это приводит к тому, что фоновый цвет (или фон из тела) отображается через прозрачное пограничное изображение .png. Я попробовал Background-clip и позицию, чтобы заставить IE запускать фоновое изображение из-за границы поля без везения.Ошибка обложки IE и фонового изображения

Все, что у меня отсутствует или предложения? Sample жить прямо сейчас @Sample

#Menu { 
background-color: #DBD1AC; 
background-image: url(images/texture_paper_tileable.jpg); 
background-repeat: repeat; 
background-clip: border-box; 
background-position:0 0; 
margin: auto; 
padding: 0; 
height: auto; 
width: 80%; 
border-style: solid; 
border-width: 91px 92px 90px; 
-moz-border-image: url(images/menuBorderREDpaint.png) 91 92 90 stretch repeat; 
-webkit-border-image: url(images/menuBorderREDpaint.png) 91 92 90 stretch repeat; 
-o-border-image: url(images/menuBorderREDpaint.png) 91 92 90 stretch repeat; 
border-image:url(images/menuBorderREDpaint.png) 91 92 90 fill stretch repeat;

}

Родитель будет тело ...

body { 
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
/*background-color: #42413C;*/ 
/*background-color: #2a1d0d; brown*/ 
background-color: #DBD1AC; 
background-image: url(images/OldWood.jpg); 
background-repeat: repeat; 
background-position: 0 940px; 
margin: 0 auto; 
padding: 0; 
color: #FFF;

}

источник

2015-01-30 Jason Collins

Вот обходной путь. Я обернул меню div в другой div и установил фоновое изображение. Затем удалите фоновое изображение из меню div, чтобы он отображал за ним изображение обертки div.

<!DOCTYPE HTML> 
<!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=edge" 
http-equiv="X-UA-Compatible"> 
<style> 
#Menu { 
border-style: solid; 
border-width: 91px 92px 90px; 
-moz-border-image: url(menuBorderREDpaint.png) 91 92 90 stretch repeat; 
-webkit-border-image: url(menuBorderREDpaint.png) 91 92 90 stretch repeat; 
-o-border-image: url(menuBorderREDpaint.png) 91 92 90 stretch repeat; 
border-image:url(menuBorderREDpaint.png) 91 92 90 fill stretch repeat; 
} 
#MenuBackground{ 
background-image: url(texture_paper_tileable.jpg); 
background-repeat: repeat; 
background-clip: content-box; 
background-position: 0 0; 
margin: auto; 
padding: 0; 
height: auto; 
width: 80%; 
} 
</style> 
<BODY> 
<BR><BR>  
<div id="MenuBackground"> 
<DIV id="Menu">            
<BR><BR> 
menu 
<BR><BR> 
</DIV>   
</div>  
<BR><BR>      
</BODY></HTML>

Я поставил там файл here, я проверил его на хром и ie11.

источник

2015-02-02 08:21:18 Padhraic

Привет, Джейсон, это решило проблему, с которой вы столкнулись? – Padhraic

Да, это было! Большое спасибо!! Извините за задержку. –

Ошибка обложки IE и фонового изображения

ответ

Смежные вопросы