web-dev-qa-db-ja.com

IE7での奇妙なフロート動作

タイトルといくつかのツールボタンを含むヘッダーバーを備えた単純なボックスを作成したいと思います。私は次のマークアップを持っています：

<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

これは修正できますか？

cssinternet-explorer-7css-float
12
Kees de Kooter

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

これは簡単な答えなので、うまくいかない場合は手を挙げます。幅ではなく最小幅を追加するだけで、Markoのソリューションはおそらく機能すると思います。 ie6にも対応しようとしている場合は、最小幅がie6とその子孫でサポートされていないため、ハックを使用する必要がある場合があります。

したがって、これはIE7やその他の最新のブラウザで機能するはずです。最小幅を適切な値に設定します。

<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>
3
Sam Murray-Sutton

非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());
        });
    }
2
Kees de Kooter

最近、右のフロート要素に他の要素の前に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>
1
Premanshu

position:relative;を親要素と子要素に配置してみてください。それは私にとって問題を解決しました。

1
Toni