Firefox不更新窗口上的浮動相關佈局調整大小

今天遇到一個奇怪的問題。我一直在使用浮動菜單，該菜單適用於迄今爲止已測試的所有內容（尚未獲得舊版IE版本......），除了Firefox以外。頁面在第一次加載時呈現正確，但是如果窗口被調整大小，具有確定性佈局（即內聯元素，具有溢出的div：隱藏等）的元素無法更新。Firefox不更新窗口上的浮動相關佈局調整大小

任何人都有（最好是JavaScript免費）解決方法？

HTML：

<div id="leftBar"> 
    <a>test1</a> 
    <a>test2</a> 
</div> 
<div id="bodyContent"> 
    <div> 
     <div id="contenta"> 
      Hello world! 
     </div> 
    </div> 
    <div> 
     <p>Paragraph test</p> 
    </div> 
    <div style="clear:both"> 
     Enclosing div. 
    </div> 
</div>

CSS：

#leftBar { 
    float:left; 
    width:50px; 
    background:red; 
    height:75px; 
} 

#bodyContent { 
    margin:0 auto; 
    width:500px; 
    background:green; 
} 

#bodyContent > div { 
    overflow: hidden; 
} 
#contenta { 
    width:100%; 
    height:50px; 
    background:blue; 
}

的jsfiddle here。

來源

2013-05-22 Josh Doebbert

我不確定這是你想要達到與否，但我會親自使用一個容器的元素。

#container { 
    width: 550px; 
} 

#leftBar { 
    float:left; 
    width:50px; 
    background:red; 
    height:75px; 
} 

#bodyContent { 
    margin:0 auto; 
    width:500px; 
    background:green; 
    overflow: hidden; 
} 

#contenta { 
    width:100%; 
    height:50px; 
    background:blue; 
}

然後將您的內容包裝在容器中。

來源

2013-05-22 00:55:28

不幸的是，那不是我真正想要的。我想要的是允許leftbar漂浮在bodycontent上，但對於* bodycontent內的任何*可以適當調整大小以避免重疊。我發佈的代碼在第一次加載頁面時會在每個瀏覽器（包括firefox）中執行此操作。問題是，在Firefox中，如果您在第一次渲染後調整窗口大小（這會改變左欄的位置），則bodycontent的元素將保留其初始大小。 –

Firefox不更新窗口上的浮動相關佈局調整大小

回答

相關問題