1

タイル化された背景画像と境界画像を持つ Div があります。ボーダー画像は透明な .png で角がデザインされているため、ボーダー ボックスの厚さは全体で約 90px です。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>

ここにファイルを配置しました。クロムとie11でテストしました。

于 2015-02-02T08:21:18.460 に答える