1

我有一个带有平铺背景图像和边框图像的 Div。边框图像是带有角设计的透明 .png，因此边框框周围的厚度约为 90 像素。IE 在边框框内启动背景图像，而 FF、Chrome 和 Safari 在边框框外边缘启动背景图像。在 IE 中，这会导致背景颜色（或正文的背景）通过透明的 .png 边框图像显示。我已经尝试过 Background-clip 和 position 让 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;

}

4

1 回答 1

0

这是一种解决方法。我已将菜单 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 上测试了它。

于 2015-02-02T08:21:18.460 回答