IE9和浮动divs对齐的CSS问题

Question

我遇到一个问题，我有一个左浮动div，其中有一个图像，然后是右边几个div的堆栈。在兼容模式下，它在FF，Chrome和IE9中显示正常，但是当在正常的IE9中查看时，最底部的div被推到图像下方...

左div：

{
float: left;
clear: both;
margin-right: 10px;
} 

正确的div（在IE9上显示的那个）：

width: 350px;
float: right;
margin-left: 10px;
height: 150px;
overflow: hidden;

这是IE9中的样子： http://i.imgur.com/tXgAZaN.png

以下是Chrome或FF中的内容： http://i.imgur.com/yLOFvew.png

Answer 1

我认为这是明确解决问题之一。我也时不时地遇到这些问题。修复或黑客是总是向它添加一个所谓的伪元素的新元素，以便它正确呈现。所以

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

这里cf将是您的内容

来自http://nicolasgallagher.com/micro-clearfix-hack/

我希望这能为你解决这个问题，让我知道。

Answer 2

请尝试给你的左边宽度？并确保总和加起来; - ）

Answer 3

要做的三件事。

1. 指定左右div所在容器的总宽度。
2. 将宽度指定为左侧宽度。因此，右侧div的文本不会合并在一起。
3. 在右div之后放置另一个类clr div，以清除左右div所容纳的容器中的浮动。

示例：

<div id="container">
  <div id="left_div">

  </div>
  <div id="right_div">

  </div>
  <div class="clr" style="clear:both;"></div>
</div>

适用于所有浏览器。

请记住，left_div和right_div的总宽度不应超过容器。