web-dev-qa-db-ja.com

Internet Explorer 6および7：右にフロートされた子要素が含まれている場合、フロートされた要素は100％の幅に拡張されます。回避策はありますか？

親divが左にフロートし、2つの子divが右にフロートする必要があります。

親divは、（仕様を正しく理解している場合）子divsを含めるのに必要な幅である必要があります。これは、Firefoxなどでの動作です。

IEでは、親divは100％の幅に拡張されます。これは、子が正しくフロートされているフロート要素の問題のようです。テストページ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0;float:left;">
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>

</html>

残念ながら、子divsの幅を固定できないため、親に固定幅を設定できません。

親divを子divsと同じ幅にするためのCSSのみの回避策はありますか？

cssinternet-explorercss-float
28
Paul D. Waite

これは、IE6でinline-blockを http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ のように機能させるソリューションです。要素は、右に浮かぶ<div>sのように動作します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<title>Float with inline-block test</title>

<style type="text/css">
    .container {
        border-top: solid 10px green;
        float: left;
    }

    .tester1,
    .tester2 {
        float: right;
    }

    .tester1 {
        border-top: solid 10px blue;
    }

    .tester2 {
        border-top: solid 10px purple;
    }
</style>

<!--[if lte IE 7]>
<style type="text/css">
    .container {
        text-align: right;
    }

    .tester1,
    .tester2 {
        float: none;
        zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
    }
</style>
<![endif]-->

</head>

<body>
<div class="container">
    <div class="tester1">Tester 1</div>
    <div class="tester2">Tester 2</div>
</div>
</body>
</html>
12
cryo

text-align: rightとdisplay: inlineを使用して解決策を考え出しました。

これを試して：

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="margin-top: 10px; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
        <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
    </div>
</div>

例と同じように表示するには、マークアップの「テスター」ボックスの順序を切り替える必要があることに注意してください。新しいコンテナにマージントップの代替手段があると思いますが、今は調べる時間がありません。

他のすべてのブラウザでよりクリーンなスタイルが必要な場合は、次のことを試してください。

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="float: right;">
        <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
        <div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
    </div>
</div>

これらのボックスの周りにレイアウトしたいときに発生する可能性のあるいくつかの異なる問題があります。ただし、これらの問題はこれよりもはるかに簡単に解決できると思います。

これがお役に立てば幸いです。

7
kaba

私は同じ問題を抱えていて、子要素（右にフロートさせたい）をposition：absoluteとright：0で配置することで解決しました。親要素に子要素用のスペースを確保するのに十分な適切なパディングを与えました...一撃の価値がありますが、すべてのアプリケーションで機能するとは限りません。

2
evilunix

要件に合ったCSSのみのソリューションを思い付くことができませんでしたが、JavaScriptソリューションを使用したい場合は、次のコードが役立つでしょうか。 divのスタイルは変更せず、ID main、sub1、およびsub2のみをdivに追加しました。

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
2
Daan

まず、なぜインラインスタイルを使用しないのですか？

これを使用して、別のcssファイルでIEをターゲットにします：

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

これが直接の質問ではないことは知っていますが、IEは常に対処するのが面倒です！私が知っているほとんどのデザイナー/開発者は、IE用のまったく新しいスタイルシートを作成します。

0
Kevin Brown

あなたが始めることができる何かはこれです：

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

その結果は、少なくともあなたが探しているものの球場にあるようです。明らかに、必要に応じて微調整し、おそらくいくつかのcssロジックを追加して、ブラウザーにのみ適用するようにします<IE 7。

それがあなたが探しているものと正確に一致しない場合は、いくつかの負のマージンで遊んでみてください。

0
Josh E

非常にハッキーですが、IE、chromeおよびFFで問題なく動作するCSSのみのソリューション。

kabaの解決策を採用しましたが、問題は、IEで問題なく動作しますが、他のすべてのブラウザーでは、2つの子divの間に4pxのスペースが表示されます。スペースは4pxのままです。両方のdivのコンテンツが拡張された場合。それを修正するために、IE条件ステートメントを使用しました。私は世界で最高のコードのようには見えませんが、それで仕事は終わります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0; float: left;">

    <div style="border-top:solid 10px #00c; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>

        <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">

        <!--[if gte IE 5]>
        <div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
        <![endif]-->

         Tester1

        <!--[if gte IE 5]>
        </div>
        <![endif]-->


        </div>

    </div>
</div>
</body>
</html>
0
DMin

外側のdivの代わりに単一セルテーブルを使用するのはどうですか？すべてを適切に配置するには、さらに作業が必要になる場合がありますが、テーブルは拡張されません。

0
Oren Shalev