IE9はフローティング要素で正しく幅を計算しません

たとえば、100pxの幅のdivコンテナを作成し、2つのdiv要素を1つ左に浮動小数点に、もう1つを2pxの幅で右側に配置します46pxそれぞれは、親コンテナの幅全体をカバーする同じ線上に並べて描画する必要があります。これはFirefoxとChromeで発生しますが、IE9はそれらを別々の行に描画し、他のブラウザと同じ効果を得るために、親要素に102pxの幅を指定する必要があります。なぜですか？個人的にIE9はフローティング要素で正しく幅を計算しません

<html> 

<head> 

<style> 

div { 
margin:0; 
padding:0; 
} 

</style> 

</head> 

<body> 

<div style="border: 5px solid;width:100px;height:100px"> 

<div style='border:2px solid green;width:46px;height:46px;float:left'></div> 

<div style='border:2px solid 
green;width:46px;height:46px;float:right'></div> 
<div> 

</body> 

</html>

出典

2012-04-06 Bat0u89

いくつかのコードを追加し、おそらく私たちは助けることができます。あなたが言及したことで、私はあなたのメインdiv内のフローティング要素がオーバーフローしていることを伝えることができます。これはあなたのdivが含まれていない理由です。 – breezy

2つの56px幅のdivが100px divの親に並んで浮かんでいるのがわかりません... – mddw

申し訳ありません、修正済み... – Bat0u89

OK問題の解決方法を見つけました。あなたはDOCTYPE宣言の例を追加する必要がありますされて何をする必要があり

：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

この動作は、より小さな要素につながるとしてのでつまりボックスモデルのバグhttp://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug であるようには思えません... 私は本当に混乱しています...

出典

2012-04-07 19:15:32 Bat0u89

が、私はむしろ多くの周りのフロートよりもdisplay: inline-blockを使用したい：

は、ここでは、コードです。

とにかく、問題の原因は、2つの<div>要素の間にある空の空白です。それは第2のものを下にシフトさせている可能性があります。それを削除してください（つまり、<div...>...</div><div...>...</div>）

出典

2012-04-07 11:48:04

すべての浮動小数点はブロック要素なので、空白の影響を受けません。それでも私はすべての空白を削除しましたが、私はまだ同じ問題に直面しています... – Bat0u89

IE9はフローティング要素で正しく幅を計算しません

答えて

関連する問題