与IE9和浮动div对齐的CSS问题

我有一个问题，我有一个左浮动的div与其中的图像，然后在右边的几个div的堆栈。它显示罚款FF，Chrome和IE9在兼容性模式，但最底层的DIV得到，当它在正常IE9中查看图像下面推...与IE9和浮动div对齐的CSS问题

左格：

{ 
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

来源

2013-03-27 happymoniker

我认为这是一个明确的问题。我也偶尔遇到这些问题。修补程序或黑客总是添加一个新的元素，即所谓的伪元素，以使其正确呈现。所以

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

我希望这次修复它为您的内容

它，让我知道。

来源

2013-03-27 17:37:26 Gerard

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

来源

2013-03-27 17:34:58 user2194405

三件事情要做。

指定左右分隔的容器的总宽度。
将宽度指定为左侧宽度。因此，正确的div的文本不会合并在一起。
把右边div后面的class clr的另一个div放到左边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的总宽度不应超过容器。

来源

2013-03-27 19:16:11 Hassaan

与IE9和浮动div对齐的CSS问题

回答

相关问题