內聯元素和浮動行爲不如預期

Question

我想徹底瞭解瀏覽器行爲，並在此刻明確浮動。

用下面簡單的代碼，我希望在div浮到文本的左側：

<span>Some span (inline) text</span> 
<div class='a'>Floated div</div>​ 

與下面的CSS：

div.a { 
    background-color: red; 
    width:100px; 
    float:left; 
} 

在大多數瀏覽器它做什麼，我希望，但在IE7上，跨度文本出現在一行上，浮動div在下 - 請參閱以下jsfiddle：http://jsfiddle.net/FtYYZ/

有人可以請解釋一下正在瀏覽器佈局方面？我的理解是「浮動元素被從正常流程中取出並放置在左側或右側」。我會認爲沒有任何東西會從第一行的末尾開始正常流動，所以像大多數瀏覽器一樣，浮動應該停留在該行。 IE行爲背後的邏輯是什麼？

感謝您的幫助！

Answer 1

說實話，IE 7只佔瀏覽器份額的1％。

爲了解決這個問題，我會把follwing放在你的body元素中。

<!--[if lt IE 8]> 
     <p class="chromeframe">You are using an <strong>outdated</strong> browser. 
Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a 
href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> 
to improve your experience.</p> 
    <![endif]--> 

沒有必要鼓勵IE 7使用。