为什么Safari5中存在意外的保证金权限？

Question

我很好奇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>

CSS：

.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; }规则。）

http://jsfiddle.net/MvF3V/1

大多数浏览器：

Safari5：（在5.1.7上测试，但也在5.1.9上测试）

当我删除overflow: hidden;时，它工作正常，但我需要其他内部元素。

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

1. 这是一个Safari-5-Bug，还是我的CSS规则在某种程度上是错误的，即使它们在大多数浏览器上“有效”？
2. 如果它是一个Bug，它是否有一个名称，我可以用它来解决一些变通方法？
3. 我能否以某种方式检测哪些浏览器受此行为影响，为它们定义一些例外规则。

更新：标准Android浏览器（Galaxy S3，AppleWebKit 534.30）似乎使用相同的旧webkit引擎。出现同样奇怪的右边距：http://jsfiddle.net/MvF3V/1/embedded/result/

Answer 1

给一个

padding-left: 100px;

而不是

margin-left: 100px;

Answer 2

这似乎确实是旧Webkit版本中的一个错误。我发现another question有关同一问题。

有解决方法。最明显的是避免overflow: hidden清除浮点数，并改为使用clearfix。

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

  

这是Safari-5-Bug吗？

这是一个Webkit Bug

  

如果它是一个Bug，它是否有一个名称，我可以用它来解决一些变通方法？

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

  

我能否以某种方式检测哪些浏览器受此行为影响，为它们定义一些例外规则。

如果你真的想定义例外，你可以在JavaScript中制作如此丑陋的东西

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

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

但是感谢@Era和@NoobEditor的评论。