border-box + padding + max-width =跳跃元素？

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中获得一些非常奇怪的效果：

我能找到的最接近bug的报告是在Bugzilla中，但似乎没有描述完全相同的事情：

https://bugzilla.mozilla.org/show_bug.cgi?id=308801

这是一个已知问题吗？

Answer 1

如果您正在寻找解决方案，那么它可以在那里。只需将display: table;添加到您的.inner元素。