いくつかの機能ボックスの上部と下部の丸い境界線の2つの画像を持つスプライトがあります。HTMLの例：
<div class="box">
<div class="top"></div>
<div class="middle">Content Here</div>
<div class="bottom"></div>
</div>
そしてCSS：
.box {float:left;width:400px;}
.top,.bottom {float:left;width:400px;height:4px;background-image:url(/images/boxborders.gif);}
.bottom {background-position: 0 -4px;}
.middle {float:left;width:398px;border-left:1px solid #333333;border-right:1px solid #333333;}
FF 3および4、Chrome、IE 7、8、および9では、.topおよび.bottom divが中央のdivを「ハグ」してボックス効果を作成し、正常に表示されます。
ただし、IE6では、.top divは背景画像全体を表示し、高さが何らかの形で増加しているように見えます。開発者ツールバーでは高さが4pxと表示されていますが、8px画像全体が表示されているため、明らかにそうではありません。中央のdivが開始する前に、その下に同じ量のピクセルの空白があります。
誰かがこれを以前に経験したことがありますか？フィードバックをいただければ幸いです
ありがとう