Question

我有一个带有平铺背景图像和边框图像的Div。边框图像是带有角落设计的透明.png，因此边框大约为90px厚。 IE启动边框内的背景图像，其中FF，Chrome和Safari在边框的外边缘启动背景图像。在IE中，这会导致背景颜色（或来自正文的背景）通过透明的.png边框图像显示。我已经尝试了背景剪辑和位置让IE从边框的外面开始背景图像而没有运气。

我遗失的任何内容或建议？现在直播@ 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;

}

Answer 1

这是一种解决方法。我已将菜单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放在那里，我在chrome和ie11上测试了它。

IE边框图像和背景图像框问题

1 个答案: