Css 为什么在Safari5中会出现意外的右边空白？

我对Safari 5.1上的一个奇怪渲染行为感到好奇。在两列布局中，第一列具有固定宽度，第二列应占据剩余部分

HTML:

<div class="row">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right. Some more text here, to show how odd the line breaks...</p>
    </div>
</div>

.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }

这在大多数浏览器上都非常有效（正如我所想，在所有“现代”浏览器上），但现在我发现，Safari 5在第二列添加了一个意外的右边距，其宽度与预期的左边距相同（好像有一个

.right{margin right:100px；}

规则）

大多数浏览器：

<div class="row">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right. Some more text here, to show how odd the line breaks...</p>
    </div>
</div>

.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }

Safari5:（在5.1.7中进行了测试，但在5.1.9中也进行了测试）

当我移除

溢出时：隐藏它工作正常，但我需要其他内部元素使用它

我的问题不是如何重新安排这个小例子，而是：

<div class="row">
    <div class="left">
        <p>Left</p>
    </div>
    <div class="right">
        <p>Right. Some more text here, to show how odd the line breaks...</p>
    </div>
</div>

.row { width: 300px; background: yellow; overflow: hidden; }
.left { width: 100px; background: red; float: left; }
.right { margin-left: 100px; background: green; overflow: hidden; }

这是一个Safari-5-Bug，还是我的CSS规则在某种程度上是错误的，即使它们在大多数浏览器上“工作”
如果它是一个Bug，它是否有一个名称，我可以用它搜索一些解决方法
我是否可以检测哪些浏览器受到这种行为的影响，为它们定义一些异常规则
更新：标准Android浏览器（Galaxy S3，AppleWebKit 534.30）似乎使用了相同的旧webkit引擎。同样奇怪的右页边距出现了：
给出一个

padding-left: 100px;

而不是

margin-left: 100px;

这似乎确实是旧Webkit版本中的一个bug。我发现了同样的问题

有一些变通办法。最明显的是避免溢出：隐藏以清除浮动，并使用

由于没有人回答我的问题，我试着自己回答：

这是Safari-5-Bug吗

这是一个Webkit错误

如果它是一个Bug，它是否有一个名称，我可以用它搜索一些解决方法

找不到名字，显然没有很多人像我一样布局网站。。。（并且仍然希望支持旧浏览器）

我是否可以检测哪些浏览器受到这种行为的影响，为它们定义一些异常规则

如果你真的想定义异常，你可以用JavaScript来做这样难看的事情

var webkitCheck = /AppleWebKit\/([0-9.]+)/.exec(navigator.userAgent);
if (webkitCheck) {
    var webkitVersion = parseFloat(webkitCheck[1]);
    if (webkitVersion < 535) {
        jQuery('html').addClass('oldWebkit');
    }
}

var-webkitCheck=/AppleWebKit\/（[0-9.]+）/.exec（navigator.userAgent）；
如果（webkitCheck）{
var webkitVersion=parseFloat（webkitCheck[1]）；
如果（webkitVersion<535）{
jQuery（'html'）.addClass（'oldWebkit'）；
}
}

<535
，因为534.59.10是最新Safari5版本的Webkit版本，而在Safari6中，此错误不再出现

但是谢谢，@Era和@NoobEditor的评论。
您需要溢出：隐藏以清除浮动。对吗？@Era：没错。我喜欢用
overflow:hidden清除浮动。我可以使用clearfix解决方案，但我仍然很好奇，为什么会出现这种奇怪的渲染。这可能是safari的一个bug。是的，你可以在@BeatSprenger:
这在大多数浏览器上都非常有效
…你这是什么意思？？？我怀疑这是一个浏览器错误…你能详细说明突出显示的部分吗，因为你没有使用任何css3/供应商前缀，所以它应该可以在所有浏览器上工作@纪元：一般提示，bff…
硬重置
永远不会被建议，正如您在您的小提琴中所显示的那样！！：）但这将在我的右栏中添加一个填充（请参阅），这不是我想要的。我设置了
marginleft:100px
，以避免右栏的内容在左栏周围浮动，如果右栏高于左栏。