IE9 和 float div 对齐的 CSS 问题

Question

我遇到了一个问题，我有一个左侧 float 的 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

我认为这是那些明确修复的问题之一。我也时不时遇到这些问题。修复或 hack 是始终向其添加一个新元素，即所谓的伪元素，以使其正确呈现。所以

/**
 * 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/

我希望这能为您解决问题，请告诉我。