html - ie7 子 block 元素扩展并忽略父填充

Question

我很难弄明白这一点。

我在另一个具有底部填充(父元素)的 block 元素中有一个 block 元素。子元素将其高度扩展 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;
}