ボックスをスライスする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

font-sizeとline-heightのプロパティが攻撃的なものかもしれません。トップボックスにテキストを配置しない場合は、

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

Answer 2

などが見つかりました。

divに入れるだけで、チャームのように機能します！

が見つかったhttp://archivist.incutio.com/viewlist/css-discuss/39150