У меня есть спрайт с двумя изображениями, верхняя и нижняя закругленные границы для некоторого блока функций. Некоторые примеры 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, изображение будет примерно на том же количестве пикселей ниже.
Кто-нибудь испытывал это раньше? Любые отзывы приветствуются
Спасибо