IE9 CSS浮动：左右下推内容答案

【问题标题】：IE9 CSS float:left and right push content downIE9 CSS浮动：左右下推内容
【发布时间】：2012-09-06 01:16:21
【问题描述】：

我在 IE9 中处理 CSS float 时遇到问题。请查看 partycypacjaobywatelska.pl。在 Firefox、Chrome、Opera 等中，主页正确显示，而 IE9 在标题和其余内容之间显示空白。

这个空间由 left 和 right 类的两个元素触发（它们在 DOM 中的位置：body -> #wrapper -> #container -> .left, .right）。他们分别设置了float: left 和float: right，但在IE9 中，他们将.middle div 向下推。在它们上设置display: none 会有所帮助，但我无法完全控制这些 div 何时获得内容，所以这对我来说不是一个可行的解决方案。

我尝试创建一个最小的示例，但this jsFiddle 在 IE9 中运行良好。知道什么可能触发错误吗？

提前感谢您的帮助。

【问题讨论】：

不确定是什么问题 - 超级奇怪。如果你在 .middle 上抛出 clear: none; 会发生什么？或者在 .middle 上设置一个高度？
设置height 没有任何改变，而添加clear: none 会向下推.middle。如果您进入 IE9 DOM Inspector 并单击 .middle 节点，您将看到 .middle 实际上并没有被向下推，因为这些浮动，它变得更窄了。然后.middle 内的.jimgMenu 的宽度要大得多，并且被向下推。如果我在.middle 上设置clear: both，.middle 也会被向下推（但仍保持其较短的宽度......奇怪）。在 Chrome/Firefox 中，.middle 的宽度比在 IE9 中大得多（它与 .left 和 .right 重叠，而不是在 IE9 中它们并排）。
好的，我的解决方法是确保布局中的.left 和.right 中没有空格，并在.left:empty 和.right:empty 上设置display: none。像魅力一样工作。

标签： css internet-explorer internet-explorer-9 css-float

【解决方案1】：

使用 IE 的开发工具，.middle 实际上并没有被推送，它是里面的 .jimgMenu。如果你把overflow:hidden 去掉，那么你可以看到IE9 和Firefox 的行为是一样的。绝对是浮动内容区域的移动。您是否尝试过 clearfix 而不是使用溢出？

老实说，如果 .left 和 .right 像这样被粘在侧面，那么它们可能应该绝对定位。它们甚至包含什么？为什么他们假设漂浮在内容后面？这可能不是构建 HTML 的最佳方式。

【讨论】：

是的，我自己不会使用花车。我没有创建这个网站，我只是从别人那里“继承”了它，我必须把它整理好。最初它甚至错过了任何 DOCTYPE...禁用overflow: hidden 将需要我将它们的位置更改为绝对位置并以不同的方式定位.middle。 TBH 我有点害怕在布局中改变太多，因为我不知道这段代码中隐藏着什么野龙等着咬我。我只是不明白为什么 IE9 在这里的行为与世界其他地方不同，有什么想法吗？
另外，请参阅我对我的问题的评论，我描述了我在 DOM Inspector 等中发现的内容。
啊，有一点需要注意 - .left 和 .right 必须静态或相对定位，因为它们可能高于中间的位置，而页脚需要低于它们； .middle 是这里奇怪的定位元素。
顺便说一句，如果通过 clearfix 你的意思是在.middle 或.jimgMenu 上设置clear: both 同时在.jimgMenu 上禁用overflow: hidden 那么它没有帮助； .jimgMenu 仍然被按下。
通过 clearfix 我的意思是代替 .jimgMenu 使用溢出，添加一个 .jImgMenu:after { content: '';明确：两者；显示：块； }