CSS/IE7：延伸的背景圖像

的情況下情況：CSS/IE7：延伸的背景圖像

有一個可摺疊的先進的搜索框。它由包含boxhead div和boxbody div的搜索框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; 
}

來源

2010-05-27 dmr

我searchToggle前boxbody添加一個空div。它解決了這個問題。

來源

2010-05-27 18:25:37 dmr

CSS/IE7：延伸的背景圖像

回答

相關問題