Question

我正在尝试切圆角的盒子。图像在3个部分（顶部 - 中部 - 底部）水平切片。 IE7中的问题是顶部div大于我设置的实际大小。

这是HTML＆amp; 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;
}

Answer 2

找到了解决方案！

只需放入div，就像魅力一样！

在http://archivist.incutio.com/viewlist/css-discuss/39150

上找到

切片盒IE7间距问题

2 个答案: