Проблема с рамкой-изображением и фоновым изображением в IE

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

Что-то мне не хватает или предложения? Прямо сейчас образец прямой трансляции @ образец

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

}


css background-image internet-explorer border-image
person Jason Collins    schedule 30.01.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот обходной путь. Я обернул 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>

Я разместил здесь файл здесь, я тестировал его на chrome и ie11 .

person Padhraic    schedule 02.02.2015
comment
Привет, Джейсон, это помогло решить вашу проблему? - person Padhraic; 03.02.2015
comment
Да, это так !! Большое тебе спасибо!! Извините за задержку. - person Jason Collins; 10.02.2015