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

【问题标题】：CSS/IE7: The Case of the Extending Background-ImageCSS/IE7：扩展背景图片的案例
【发布时间】：2010-05-28 02:25:37
【问题描述】：

情况：

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

搜索框主体的 2 个背景图像是通过 searchBox div 和 boxbody div 的 css 设置的。在 IE7 中，当 searchToggle div 被隐藏时，searchBox div 中的背景图像在左侧的扩展超出了它应有的范围（请参阅Here）。当 searchToggle div 的显示被阻止时，它会正确显示（请参阅 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;
}

【问题讨论】：

标签： css internet-explorer internet-explorer-7

【解决方案1】：

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

【讨论】：