Ситуация:
Там складное окно расширенного поиска. Он состоит из элемента div для окна поиска, который содержит элемент boxhead и элемент boxbody. Внутри блока boxbody находится элемент searchToggle. Когда пользователь нажимает «Показать / Скрыть», свойство стиля отображения div searchToggle переключается между блоком и ни одним. (Поля поиска скрыты, а поле поиска становится намного меньше).
2 фоновых изображения для тела поля поиска задаются с помощью css элемента searchBox и элемента boxbody. В IE7, когда div searchToggle скрыт, фоновое изображение из div searchBox расширяется влево больше, чем следовало бы (см. Здесь ). Он отображается правильно, когда отображение элемента searchToggle является блоком (см.
Здесь ). Все отображается правильно, в обоих случаях в IE8 и FF.
Соответствующий HTML:
<div class="searchBox">
<div class="boxhead">
<h2></h2>
</div>
<div class="boxbody">
<div id="searchToggle" name="searchToggle">
</div>
</div>
</div>
Соответствующий CSS:
.searchBox {
margin: 0 auto;
width: 700px;
background: url(/images/myImageRight-r.gif) no-repeat bottom right;
font-size: 100%;
text-align: left;
overflow: hidden;
}
.boxbody {
margin: 0;
padding: 5px 30px 31px;
background-image: url(/images/myImageLeft.gif);
background-repeat: no-repeat;
background-position: left bottom;
}