浮动 div 在 IE 和 FF 中低于其他 div答案

【问题标题】：Floated div dropping below others in IE and FF浮动 div 在 IE 和 FF 中低于其他 div
【发布时间】：2012-05-23 22:12:42
【问题描述】：

this page that I'm working on 上的一些浮动 div 有一个奇怪的问题。页面上有 3 个，中间有 1em 的边距。在 Chrome 中，它们完美地排列在一起，但在 IE 和 FF 中，右手的位置稍微下降了一点——但不是一直在下面。我认为这可能最好用图片来描述，请参见下文：

我无法确定是哪位 CSS 导致了这种情况 - 我已经通过新的 FF 代码检查器并使用 webdev 工具栏突出显示了所有块级对象，但看不到任何会导致这种下降的东西.

我确实想知道是不是 JS 推特提要中的某些东西导致了它，但我已经交换了推特和“更新”框，它始终是右手边的那个。我还尝试从页面中删除其他元素 - 菜单和这三个框之间的所有内容。

我必须承认，我已经无计可施了！谁能发现我错过的明显东西？ CSS 相当大，我不确定要显示哪一点，所以我没有将它复制进去，但如果有人愿意，我会这样做。否则可以在http://www.woodexperts.com查看所有内容

【问题讨论】：

在我所有的浏览器中都可以正常工作。如果你打算支持它，整个网站在 IE7 中看起来相当混乱。
我还没有完全正确地完成它，但是在 IE9 中，如果你将 div#main div.tricolumn 的 padding-right: 1em 更改为 padding-right: 0.9em，它是固定的。如果作为答案“足够好”，请告诉我..
@JamesHay 谢谢，我没发现 - 典型的！
@thirtydot，我认为这不是间距问题，因为它只下降了几个 em，但你是对的！谢谢你:)

标签： html css positioning css-float

【解决方案1】：

将div#main div.tricolumn 中的width: 15.25em 更改为width: 15.24em

这应该可以解决问题。

【讨论】：

谢谢，我以为这不是间距问题，因为我认为这会一直强制它到下一行，但这是正确答案。

【解决方案2】：

我知道这是一个 hack，但如果 IE 是唯一导致问题的浏览器，您可能需要考虑 IE 条件 cmets，它仅限制 IE 的某些样式：

http://msdn.microsoft.com/en-us/library/ie/ms537512(v=vs.85).aspx

【讨论】：