私のプロジェクトでは、浮動要素を頻繁に使用します。これは、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に浮動要素の幅を認識させる良い方法はありますか?
IE7で説明した問題を示すhttp://jsfiddle.net/デモを設定できますか? – thirtydot
'.left'や' .right'の 'display:block'の必要はありません。フローティング要素は暗黙的にブロックレベルです。表示用に設定された値は無視されます( 'display:none'以外)。 –
'.clear'に' visibility:hidden'は必要ありません。デフォルトでは、空のdivはすべてのブラウザでゼロの高さを持ちます。 –