切片一个盒子 IE7 间距问题答案

【问题标题】：Slicing a box IE7 spacing problem切片一个盒子 IE7 间距问题
【发布时间】：2026-01-12 13:10:01
【问题描述】：

我正在尝试切一个圆角的盒子。图像被水平分割成 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%;

}

感谢您帮助我！病房

【问题讨论】：

标签： css slice

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

找到了解决办法！

只需放入 div，它就会像魅力一样工作！

发现于http://archivist.incutio.com/viewlist/css-discuss/39150

【讨论】：