IE7の奇妙なフロート動作

Question

タイトルといくつかのツールボタンを含むヘッダーバーを持つ単純なボックスを作成したい。次のマークアップがあります：

<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

これは修正できますか？

Answer 1

最も外側の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>

Answer 2

これは簡単な答えなので、うまくいかない場合は手を挙げます。 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>

Answer 3

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());
        });
    }

Answer 4

position:relative;をparent-elementおよびchild-elementに入れてみてください。問題は解決しました。

Answer 5

最近、他の要素の前に正しい浮動要素を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>

Answer 6

これを<div style="background-color:blue; padding: 1px; height: 20px;> 2つのフローティングdivの親にするclear:all