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

Question

请看一下这两个 fiddle :

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/

在另一个示例中，第二个 float 元素在窗口再次变窄和变宽后清除第一个 float 元素(仅限 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 中得到一些非常奇怪的效果:

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

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

这是一个已知问题吗？

Answer 1

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