ie7孩子块元素扩大和无视父母填充

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的pa dding： 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; 
}