logo标签列表

IE7 div浮动bug

internet-explorer-7css-floatalignmentinternet-explorer-6
3

我有以下内容：

<div id="border" style="width:100%; border:8px solid #FFF">
    <div id="menu" style="width:250px; float:left;" >
        Some menu
    </div>
    <div id="content" style="padding-left:270px; width:520px;" >
        Main page content
    </div>
</div>

这个代码可以让我得到一个左对齐的菜单和右侧的内容，所有内容都被边框包围。

在包括IE8在内的所有浏览器上都可以正确显示。

但是在IE7上，内容只会从菜单下方开始，并且在菜单右侧留下了一个大的空白区域。

我已经搜索了各种解决方案并尝试了各种左右浮动、清除浮动等组合。但它总是在不同的浏览器上显示不同。

感谢任何帮助。 Michael

1个回答
3
移除您的内容div上的填充并将其设置为左浮动。
您可能需要在其后放置<div style="clear: left"></div>。
我尝试过了，但不起作用。这是因为边框容器的高度为0，从而去除了边框。添加div clear: left可解决问题。非常感谢。 - Michael Frey
没问题，如果答案解决了你的问题，请别忘了点击小勾接受答案 :) - NibblyPig
刚刚意识到问题已在IE7中得到解决，但现在我在Chrome中遇到了新问题。现在内容显示在菜单的右侧，当菜单结束时，内容继续出现在菜单下方。在IE7中，内容会继续保持一条直线，而不是向左对齐。 - Michael Frey
忽略那个评论。是我的错误。它确实有效。我已经选中了你的答案。 - Michael Frey
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接