想知道是否有人可以帮助我。如何将内容区域与下面框的顶部对齐。 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/

10-05 20:56
查看更多