Question

情况：

有一个可折叠的高级搜索框。它由一个包含boxhead div和boxbody div的搜索框div组成。在boxbody div中，有一个searchToggle div。当用户单击“显示/隐藏”时，searchToggle div的显示样式属性在块和无切换之间切换。（搜索字段被隐藏，搜索框体变得更小）。

搜索框正文的2个背景图像是通过searchBox div和boxbody div的css设置的。在IE7中，当隐藏searchToggle div时，来自searchBox div的background-image在左侧扩展得比它应该更多（参见Here）。当searchToggle div的显示为block时，它会正确显示（请参阅 Here）。在两种情况下，在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;
}

Answer 1

我在searchToggle之前在boxbody中添加了一个空div。它解决了这个问题。

CSS / IE7：扩展背景图像的案例

1 个答案: