CSS Box-model 在 Chrome 15（最新稳定版本）中似乎被破坏了
我认为在现代浏览器之间检查框模型问题的日子已经一去不复返了......
我在让 Chrom[e|ium] 正确显示我的网站时遇到了问题，但我已经设法创建这个非常简单的示例来说明问题所在：
HTML：
<div class="block">
<div class="left">LEFT!</div>
<div class="right">
RIGHT! 16px margins on everything.... What's that??? → → →
</div>
</div>
CSS：
div.left {
float: left;
margin: 16px;
padding: 16px;
width: 256px;
height: 256px;
outline: 1px solid red;
background: #fee;
}
div.right {
margin: 16px;
padding: 16px;
overflow: hidden;
outline: 1px solid blue;
background: #eef;
}
问题的屏幕截图：
现场演示：
I thought the days of checking box-model issues between modern browsers were long gone...
I have been having problems getting Chrom[e|ium] to display my website correctly, and I've managed to create this really simple example of what's going wrong:
The HTML:
<div class="block">
<div class="left">LEFT!</div>
<div class="right">
RIGHT! 16px margins on everything.... What's that??? → → →
</div>
</div>
The CSS:
div.left {
float: left;
margin: 16px;
padding: 16px;
width: 256px;
height: 256px;
outline: 1px solid red;
background: #fee;
}
div.right {
margin: 16px;
padding: 16px;
overflow: hidden;
outline: 1px solid blue;
background: #eef;
}
A screenshot of the problem:
A live demo:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
没有其他浏览器的行为像 WebKit 一样。
在 WebKit Bugzilla 中搜索“块格式化上下文边距”会产生这样的结果类似的结果：
https://bugs.webkit.org/show_bug.cgi?id=19123
作为解决方法，您可以使用我在评论中建议的修复：
No other browser behaves like WebKit does here.
Searching WebKit Bugzilla for "block formatting context margin" yields this very similar result:
https://bugs.webkit.org/show_bug.cgi?id=19123
As a workaround, you can use the fix I proposed in a comment: