Safari 溢出：隐藏，右边距错误

Question

我使用此代码创建 2 列布局：

<style type="text/css">
#column-wrap {
    float: left;
    width: 100%;
}
#column1 {
    background-color: red;
    width: 200px;
    float: left;
}
#column2 {
    background-color: lime;
    margin-left: 200px;
    overflow: hidden;
    min-height: 200px;
}
</style>
<div id="column-wrap">
    <div id="column1">Column 1</div>
    <div id="column2">Column 2</div>
</div>

它在除 Safari (5.1.7) 之外的所有浏览器中都能正常工作，如果我在第二列中使用 overflow: hidden; 属性，Safari 会在右侧显示一个大的空白边距。

为什么？我该如何解决？

Answer 1

我不知道你是否想要这样的东西，但试试下面的例子 ->

DEMO

从#column2 中删除margin-left:200px

#column2 {
    background-color: lime;
    overflow: hidden;
    min-height: 200px;
    }

您的#column2 将自动向左浮动，因为您没有清除其float 属性，因此不需要margin-left

在 Safari 5.1.7 (Windows) 中测试并运行。