css - 边框+填充+最大宽度=跳跃元素？

Question

请看一下这两个小提琴：

http://jsfiddle.net/Fw4dg/2/embedded/result/

<style>
    .outer, .inner {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }

    .outer {
        max-width: 600px;
        border: 1px solid #0f0;
        padding: 40px 10%; }

    .inner {
        border: 1px solid #f00; }
</style>

<div class="outer">
    <div class="inner">
        <p>Watch the parent element's padding change when you narrow the viewport.</p>
    </div>
</div>

当您将窗口缩小到超出外部框的边缘时，该框的水平填充会突然缩小，并且即使在再次加宽窗口（WebKit 和 Gecko）之后仍保持其新宽度。

http://jsfiddle.net/Fw4dg/1/embedded/result/

在另一个示例中，第二个浮动元素在窗口再次变窄和变宽后清除第一个浮动元素（仅限 WebKit）：

http://jsfiddle.net/Fw4dg/1/embedded/result/

此行为在 WebKit（在 Safari 6.0.5 和 Chrome 29.0.1547.49 beta 中测试）和 Gecko（在 Firefox 23 beta 10 中测试）中都有。它发生在有或没有边界的情况下。

如果你反复缩小和扩大窗口，你会在 Safari 中得到一些非常奇怪的效果：

Safari 损坏的 CSS 渲染：最大宽度、边框和填充