溢出：在Chrome和Safari中使用边距的隐藏混乱 [英] Overflow:hidden messing with margins in Chrome and Safari

问题描述

我为我的布局设置了一些div，一个主div和一个菜单div。

I have set up some divs for my layout, a main div and a menu div.

它们在Firefox中看起来很完美，但由于某些原因，Chrome和Safari

They look perfect in Firefox, but for some reason, Chrome and Safari get messed up.

由于某种原因，当 overflow：hidden; 时，div的宽度会变小CSS。我需要 overflow：hidden; 虽然，因为我有其他浮动在主div。您可以在这里查看示例：

For some reason the width of the div gets smaller when overflow:hidden; is added to the CSS. I need overflow:hidden; though, because I have other floats inside the main div. You can see the example here:

http://jsfiddle.net/kR7rs / 2 /

在Firefox中显示得很好，但在Safari和Chrome中，div的右侧也有边距。

It shows up fine in Firefox, but in Safari and Chrome, there's a margin on the right side of the div as well.

推荐答案

从 main 删除边距似乎可以修复：

Removing the margin from main seems to fix it:

http://jsfiddle.net/kR7rs/3/

我认为发生的是当设置 overflow：hidden 时，整个元素而不是div中的文本。所以这给了结果在小提琴。

What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.

看起来像是一个错误。

（现在没有FF来测试它，看看它是否会破坏FF。）

(Don't have FF right now to test it and see if it breaks it for FF.)

这篇关于溢出：在Chrome和Safari中使用边距的隐藏混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！