如何修复 Webkit 浏览器的这种奇怪的盒子模型行为？
今天我遇到了 Webkit 浏览器的一个非常奇怪的行为：它涉及到其他（浮动）块旁边的边距计算方式。
虽然我认为这一定是一个常见问题，但到目前为止我找不到任何相关信息。
这是我的情况：我有两个
aside {
margin-bottom: 30px;
padding: 0px 10px 10px;
width: 180px;
}
#aside-1 {
float: right;
margin-left: -400px;
margin-right: 200px;
}
#aside-2 {
float: right;
}
div {
overflow: auto; /* Block formatting context */
margin-right: 400px;
padding: 0px 10px 0px 20px;
}
这在 Firefox 和 IE>6 中运行良好。
但是，在 Chrome 和 Safari 中，div 的 margin-right 不是从右边界计算的，而是仅从 < 的左侧计算的代码>aside-2。这会导致 div 的 200 像素（宽度 + sidebar-2 的填充）太小。
是什么原因导致此 Webkit 行为以及如何修复它？
不管怎样，非常感谢您提前的帮助！
好的，所以我进行了更多测试并提出了一个简单的解决方案）：
只需给 div 一个固定的宽度即可。当然，这只适用于您的布局基于固定宽度的情况，这对我来说就是这种情况。
I came across a very strange behaviour of Webkit browsers today: It concerns the way a margin is calculated next to other (floated) blocks.
Though I think this must be a common problem, I couldn't find anything about it so far.
Here's my situation: I have two <aside>s followed by a <div>. They are all displayed next to each other, the <div> on the left then .#aside-1 and #aside-2. I achieve this throught the following CSS code:
aside {
margin-bottom: 30px;
padding: 0px 10px 10px;
width: 180px;
}
#aside-1 {
float: right;
margin-left: -400px;
margin-right: 200px;
}
#aside-2 {
float: right;
}
div {
overflow: auto; /* Block formatting context */
margin-right: 400px;
padding: 0px 10px 0px 20px;
}
This works fine in Firefox and IE>6.
However, what happens in Chrome and Safari is that the margin-right of the div isn't calculated from the right boundary, but is instead only calculated from the left of aside-2. This causes the div to be 200 pixels (width + padding of sidebar-2) too small.
What causes this Webkit behaviour and how can I fix it?
Anyway, thanks a lot for your help in advance!
OK, so I tested a bit more and came up with a simple solution):
Just give the div a fixed width. This of course only works if your layout is based on fixed widths, which is the case for me.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
尝试使用 CSS RESET，应该可以。
这是一个：http://html5doctor.com/html-5-reset-stylesheet/
Try with CSS RESET, that should work.
Here's one : http://html5doctor.com/html-5-reset-stylesheet/