Нарезать коробку IE7 расстояние между

Question

Я пытаюсь нарезать коробку с закругленными углами.Изображение разрезано по горизонтали на 3 части (верх-середина-низ).Проблема в IE7 заключается в том, что верхний 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

Нашли решение!

Просто вставьте div и он работает как шарм!

найдено на http://archivist.incutio.com/viewlist/css-discuss/39150

Answer 2

Свойства font-size и line-height могут быть оскорбительными. Если вы не размещаете текст в верхнем поле, используйте что-то вроде

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