2012-02-10 7 views
1

私のプロジェクトでは、浮動要素を頻繁に使用します。これは、IE7が関わって、物事をぶち壊すまでかなりうまくいく。例えば、このコードを取る:浮動小数点数の項目を正しく判別できないIE7の処理方法を教えてください。

HTML例ロットの

<div id="container"> 
    <div id="element-1" class="left"> 
     Some content 
    </div> 
    <div id="element-2" class="right"> 
     Some much longer, more complicated content 
    </div> 
    <div class="clear"></div> 
</div> 

CSS

.left { 
    display:block; 
    float:left; 
} 
.right { 
    display:block; 
    float:right; 
} 
.clear { 
    clear:both; 
    visibility:hidden; 
} 

、IE7は新しい行まで#要素-2をドロップします。私はこれがIE7の内容に基づいて浮動小数点型の要素の幅を決めることなく、そのうちの1つ(または両方)がコンテナdivの幅に等しいと仮定した結果です。私が通常これを見つける最も簡単な解決策は、IE7のためにその要素の幅を設定することです。

この問題は浮動小数点要素を使用するたびに発生しないため、少し散発的ですが、頻繁に発生します。

HTML

<div id="container"> 
    <div id="element-1" class="left"> 
     Some content 
    </div> 
    <div id="element-2" class="right"> 
     <div class="left"> 
      Some much longer, more complicated content 
     </div> 
     <div class="right"> 
      Even more content 
     </div> 
     <div class="clear"></div> 
    </div> 
    <div class="clear"></div> 
</div> 

上記のように

同じCSS:私のような連結フロートを使用するとき、より多くの共通のようです。

IEに浮動要素の幅を認識させる良い方法はありますか?

+0

IE7で説明した問題を示すhttp://jsfiddle.net/デモを設定できますか? – thirtydot

+0

'.left'や' .right'の 'display:block'の必要はありません。フローティング要素は暗黙的にブロックレベルです。表示用に設定された値は無視されます( 'display:none'以外)。 –

+0

'.clear'に' visibility:hidden'は必要ありません。デフォルトでは、空のdivはすべてのブラウザでゼロの高さを持ちます。 –

答えて

2

IE6と7は、フローティング要素のための固定幅を必要とする、私は発生から問題を回避するために、その方法は、それを常に使用していた...

2

これは、一般的に浮いた要素で定義された幅を使用するにはちょうど良いプラクティスです。

関連する問題