Question

我很难搞清楚这一点。

我在另一个块元素中有一个块元素，它有一个底部填充（父元素）。子元素将其高度扩展100％，同时进食/重叠父级的底部填充，就像根本没有填充一样。

什么可能触发这种行为？

这是HTML代码：

<span class="boxTop">
    <span class="boxBottom">
        <span class="boxLeft">
            <span class="boxRight">
                <span class="box">
                    Content goes here
                </span>
            </span>
        </span>
    </span>
</span>

这是CSS：

.infoBox .boxTop {
padding:20px 0 0 0;
display:block;
background:transparent url(images/infobox-top.png) repeat-x 0 0;
}
.infoBox .boxBottom {
padding:0 0 20px 0;
display:block;
background:transparent url(images/infobox-bottom.png) repeat-x 0 bottom;
}
.infoBox .boxLeft {
padding:0 0 0 20px;
display:block;
background:transparent url(images/infobox-left.png) repeat-y left 0;
}
.infoBox .boxRight {
padding:0 20px 0 0;
display:block;
background:transparent url(images/infobox-right.png) repeat-y right 0;
}

以下是ie7中的样子：

这是boxBottom：http://img.photobucket.com/albums/v466/nemesis2k4/Forum%20Posts/boxbottom.jpg

这里是boxLeft和boxRight，扩展和重叠/忽略boxBottom的填充： http://img.photobucket.com/albums/v466/nemesis2k4/Forum%20Posts/boxleft.jpg http://img.photobucket.com/albums/v466/nemesis2k4/Forum%20Posts/boxright.jpg

Answer 1

试试这个。我假设您要将.boxRight和.boxLeft放在.boxBottom

中

HTML

<span class="infoBox"> <!--InfoBox Start-->
 <span class="boxTop"> <!--boxTop Start-->
 </span>               <!--boxTop End-->

 <span class="boxBottom"> <!--boxBottom Start-->
  <span class="boxLeft">  <!--boxLeft Start-->
  </span>                 <!--boxLeft End-->

  <span class="boxRight"> <!--boxRight Start-->
  </span>                 <!--boxRight End-->
 </span>                  <!--boxBottom End-->
</span>                   <!--InforBox End-->

CSS

.boxTop
{
display: block;
padding-bottom: 20px;
}

.boxBottom
{
display: block;
padding-top: 20px;
}

ie7子块元素扩展并忽略父级填充

1 个答案: