CSS/IE7：扩展背景图像的情况

情况：

<div class="searchBox">
 <div class="boxhead">
  <h2></h2>
 </div>
 <div class="boxbody">
  <div id="searchToggle" name="searchToggle">
  </div>
 </div>
</div>

.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;
}

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

搜索框主体的2个背景图像是通过searchBox div和boxbody div的css设置的。在IE7中，当searchToggle div被隐藏时，searchBox div的背景图像会在左侧超出其应有的范围（请参阅）。当searchToggle div的显示为block时，它会正确显示（请参阅 ).在这两种情况下，IE8和FF中的所有内容都正确显示

相关HTML:

<div class="searchBox">
 <div class="boxhead">
  <h2></h2>
 </div>
 <div class="boxbody">
  <div id="searchToggle" name="searchToggle">
  </div>
 </div>
</div>

.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;
}

---

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