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; 
}