與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問題

回答

相關問題