请看一下这两个 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
这是一个已知问题吗?
最佳答案
如果您正在寻找解决方案,那么它就在那里。只需将 display: table;
添加到您的 .inner
元素即可。
关于css - border-box + padding + max-width = 跳跃元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18139760/