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不更新窗口上的浮动相关布局调整大小

回答

相关问题