IE7の奇妙なフロート動作
-
06-07-2019 - |
質問
タイトルといくつかのツールボタンを含むヘッダーバーを持つ単純なボックスを作成したい。次のマークアップがあります:
<div style="float:left">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; width: 200px; background-color: red;">content</div>
</div>
これは、FirefoxとChromeで正常にレンダリングされます。
http://www.boplicity.nl/images/firefox.jpg
ただしIE7は完全に混乱し、ページの右側に右側のフロート要素を配置します。
http://www.boplicity.nl/images/ie7.jpg
これは修正できますか?
解決
最も外側のdivで幅を指定します。 コンテンツdivの幅がこれがボックスの合計幅であることを意味する場合、単純に一番外側のdivに追加し、(オプションで)次のようにコンテンツから削除します。
<div style="float:left; width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
他のヒント
これは簡単な答えなので、うまくいかない場合は手を挙げます。 Markoのソリューションは、幅ではなく最小幅を追加するだけでおそらく機能すると思います。 ie6にも対応しようとしている場合、最小幅はie6とその子孫ではサポートされていないため、ハックを使用する必要があります。
したがって、これはIE7やその他の最新のブラウザで動作するはずです。 min-widthを適切なものに設定します。
<div style="float:left; min-width: 200px;">
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: left; background-color:green;">title</div>
<div style="float: right; background-color:yellow;">toolbar</div>
</div>
<div style="clear: both; background-color: red;">content</div>
</div>
IE以外のブラウザの動作をエミュレートするためにjQueryを使用して修正しました:
// IE fix for div widths - size header to width of content
if (!$.support.cssFloat) {
$("div:has(.boxheader) > table").each(function () {
$(this).parent().width($(this).width());
});
}
position:relative;
をparent-elementおよびchild-elementに入れてみてください。問題は解決しました。
最近、他の要素の前に正しい浮動要素をdivで追加する必要があることを知りました。これは、変更の行を追加せずに最も簡単な修正です。
<div style="background-color:blue; padding: 1px; height: 20px;">
<div style="float: right; background-color:green;">title</div>
<div style="float: left; background-color:yellow;">toolbar</div>
</div>
これを<div style="background-color:blue; padding: 1px; height: 20px;>
2つのフローティングdivの親にするclear:all