css - Slicing a box IE7间距问题

Question

我正在尝试用圆 Angular 切割一个盒子。图像被水平切成 3 部分(顶部-中间-底部)。 IE7的问题是top div比我设置的实际尺寸大。

这是 HTML 和 CSS 代码

<!-- FIRST PICTURE -->
  <div class='recent-box'>
    <div class='recent-box-top'></div>
    <div class='recent-box-middle' >                            
    </div>
    <div class='recent-box-bottom'></div>     
   </div>
   <!-- FIRST PICTURE -->
  <div class='recent-box'>
    <div class='recent-box-top'></div>
    <div class='recent-box-middle'>

    </div>
    <div class='recent-box-bottom'></div>     
   </div>
   <!-- FIRST PICTURE -->
  <div class='recent-box'>
    <div class='recent-box-top'></div>
    <div class='recent-box-middle'>
    dsqd
    </div>
    <div class='recent-box-bottom'></div>     
   </div>
   <!-- FIRST PICTURE -->
  <div class='recent-box'>
    <div class='recent-box-top'></div>
    <div class='recent-box-middle'>
    dsqd
    </div>
    <div class='recent-box-bottom'></div>     
   </div>


    .recent-box {
    width: 127px;
    float:left;
 display:block;
}

.recent-box-top {
    float:left;
    background-image: url('images/recent-foto-top.png');
    background-repeat:no-repeat;
    width: 100%;

}

.recent-box-middle {
    float:left;    
    background-image: url('images/recent-foto-middle.png');
    background-repeat:repeat-y; 
    width: 100%;

}

.recent-box-bottom {
    float:left;    
    background-image: url('images/recent-foto-bottom.png');
    background-repeat:no-repeat; 
    width: 100%;

}

谢谢你帮助我! 病房

Answer 1

font-size 和 line-height 属性可能是令人反感的。如果您没有在顶部框中放置任何文本，请使用类似

.recent-box-top {
    font-size: 0;
    line-height: 0;
}