想知道是否有人可以帮助我。如何将内容区域与下面框的顶部对齐。 IE浏览器,我不想在内容之前的顶部有一个15px的空间。
我尝试了以下有效的方法,唯一的问题是,平铺内容背景现在显示在我的顶部背景上。
我上载了示例页面here,以便您可以清楚地了解我的意思。
任何帮助,将不胜感激,谢谢。
.box {
width:218px;
}
.box .top {
width:100%; height:15px;
background:url(sidebarTop.png) no-repeat;
}
.box .content {
margin:-8px 0 0 0;
padding:0 10px;
width:198px;
background:url(sidebarTile.png) repeat-y 0 8px;
color:#FFF;
}
.box .bottom {
width:100%; height:15px;
background:url(sidebarBottom.png) no-repeat;
}
<div class="box">
<div class="top"></div>
<div class="content">
Content goes here.
</div>
<div class="bottom"></div>
</div>
最佳答案
既然IE9支持圆角,为什么不只在单个div上使用CSS3的border-radius属性呢?您甚至可以应用阴影。
.box {
padding:10px;
border-radius:10px;
-moz-border-radius:10px;
box-shadow:0px 2px 3px #BBB;
-moz-box-shadow:0px 2px 3px #BBB;
-webkit-box-shadow:0px 2px 3px #BBB;
background-color:brown;
color:white;
width:200px;
}
http://jsfiddle.net/AlienWebguy/YYhgk/