IE9 CSS浮动：左右推内容下降

我在IE9中处理CSS float时遇到问题。查看partycypacjaobywatelska.pl。在Firefox，Chrome，Opera等主页面正确显示，而IE9在页眉和其他内容之间显示空白区域。IE9 CSS浮动：左右推内容下降

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

我试图创建一个最小的例子，但this jsFiddle在IE9中正常工作。任何想法可能会触发该错误？

感谢您的帮助。

来源

2012-09-05 mgol

不知道是什么问题 - 超级奇怪。如果你在.middle上抛出clear：none，会发生什么？或者在.middle上设置一个高度？ – alexvance

设置'height'不会改变，同时增加'clear：none'会将'.middle'推下。如果你进入IE9的DOM Inspector并点击'.middle'节点，你会发现'.middle'实际上并没有被压下，由于这些浮动，它变得更窄了。然后，'.middle'里面的'.jimgMenu'的宽度要大得多，并且会被压下。如果我在'midmid'上设置了'clear：both'，那么'.middle'也会被压下（但是仍然保持其较短的宽度......怪异）。在Chrome/Firefox中，“.middle”的宽度比IE9大得多（它与'.left'和'.right'重叠，而不是IE9，它们并排）。 – mgol

好的，我的解决方法是确保布局中'.left'和'.right'内没有空格，''.left：empty'和'.right：empty'设置为'display：none'。奇迹般有效。 – mgol

使用IE的开发工具，.middle实际上并未被推送，它是它内部的.jimgMenu。如果你删除溢出：隐藏在那，那么你可以看到IE9和Firefox的行为一样。这绝对是漂浮在内容区域的花车。你是否尝试过使用clearfix而不是使用溢出？

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

来源

2012-09-05 17:16:21 Brian

是的，我不会使用自己的花车。我没有创建这个网站，我只是“从其他人那里”继承了它，而且我必须把它整理好。最初它甚至错过了任何DOCTYPE ... 禁用“overflow：hidden”将需要我将它们的位置改变为绝对位置，并将'.middle'放置在不同的位置。 TBH我有点害怕在布局中改变太多，因为我不知道在这个代码中隐藏着什么野龙，等着咬我。我只是不明白为什么IE9在这里的表现与世界其他地方不一样，有什么想法？ – mgol

此外，请参阅我对我的问题的评论，我描述了我在DOM Inspector中发现的内容等。 – mgol

啊，有一句话 - '.left'和'.right'必须静态或相对定位，因为它们可能比中间和页脚需要在它们下面; '.middle'是这里奇怪的定位元素。 – mgol

IE9 CSS浮动：左右推内容下降

回答

相关问题