Question

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

Answer 1

现在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/

Answer 2

这不太理想，但你可以尝试绝对定位。

http://jsfiddle.net/imoda/XZWTt/

.box {
    width:218px;
}
.box .top {
    width:100%;
    height:15px;
    background:url(http://demo.bigg.co.za/_help/sidebarTop.png) no-repeat;
}
.box .content {
    margin:0 0 0 0;  
    padding:0 10px;
    width:198px; 
    background:url(http://demo.bigg.co.za/_help/sidebarTile.png) repeat-y 0 8px;
    color:#FFF;
    position: relative;
}
.content > p {
    position: absolute;
    top: -10px;
}

.box .bottom {
    width:100%;
    height:15px;
    background:url(http://demo.bigg.co.za/_help/sidebarBottom.png) no-repeat;
}

Answer 3

您不需要内容div上的负边距，只需给出包含div位置：relative并给它一个顶部位置以将其放置在您想要的位置 - 例如：http://jsfiddle.net/H8TE2/

Answer 4

这不是我的问题的答案，但我已经和kinakuta一起建议使用外部脚本来获取我想要在浏览器中使用css3的结果

重复背景和负边距

4 个答案: