3

2 つの div をページの反対側にフロートさせ、その間にテキストを流そうとしています。2 番目 (左揃え) の div の上部は、最初の (右揃え) div の下部と同じにする必要があります。以下のコードは、FF、Chrome、Opera などでは問題なく動作しますが、IE では適切にクリアされません。両方の div がテキストの上部に表示されます。

テキスト内で左揃えの div を十分に低く移動すると、IE では問題なく動作しますが、それは実際には持続可能な解決策ではありません。

IE CSS フロート バグに関する複数のページを見つけましたが、これに直接言及しているものは見つかりませんでした。

CSS

div {
    width: 200px;
    margin-top: 10px;
    border-style: solid;
    border-width: 1px;
    position: relative;
}
.wrapper {
    width: 600px;
    border-color: #FF0000;
}
.right {
    float: right;
    border-color: #00FF00;
}
.left {
    float: left;
    clear: both;
    border-color: #0000FF;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="float.css" />
</head>
<body>
<div class="wrapper">
    <div class="right">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nulla pretium tempor leo. Vivamus mi risus, dapibus ac, 
        consectetur quis, pellentesque eget, sem.
    </div>
    <div class="left">
            Proin malesuada. Ut vel lorem. Cras rhoncus nisl accumsan 
            turpis tristique consequat. Sed lacinia ligula at nibh. 
            Morbi in quam. Morbi commodo nibh.
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nulla pretium tempor leo. Vivamus mi risus, 
    dapibus ac, consectetur quis, pellentesque eget, sem. 
    Maecenas est dui, imperdiet nec, fermentum ut, 
    pretium a, orci. Quisque hendrerit interdum orci. 
    Nulla sit amet risus non enim ultrices bibendum. 
    Aenean arcu purus, rhoncus at, vestibulum vel, 
    volutpat et, nunc. Integer eget risus eget purus viverra 
    congue.</p>
    <p>Nullam vel libero ut purus semper ullamcorper. 
    Pellentesque mattis tincidunt odio. Nullam pulvinar 
    orci at dolor. Sed volutpat eros ac elit. 
    Praesent porttitor libero sed felis. Vivamus lobortis 
    pellentesque diam. 
    Proin laoreet massa ac metus. Integer faucibus lorem 
    molestie nibh. Integer id massa. Integer ligula ipsum, 
    pellentesque id, interdum at, pretium eget, orci.
    Proin malesuada. Ut vel lorem.</p>
</div>
</body>
</html>
4

2 に答える 2

6

IE7 と IE6 には、と の両方を持つ要素に関するさまざまな問題があります。IE7 では、同じ方向にフロートされている他のフロートの下にあるフロートのみをクリアする要素で使用します。floatclearclearfloat

easyclearing修正プログラムの修正版を使えばうまくいくかもしれませんが、期待しないでください。詳細については、このページを参照してください: IE7 に新しいクリア方法が必要ですか? .

要点は、これを IE6/7 で不正行為なしに動作させることはおそらくないということです: テキスト内で div を下に移動したり、段落に div を埋め込んだりするなど.

于 2009-04-27T22:48:42.103 に答える
0

これは、純粋な CSS ソリューションを持たない ie6 のまれなバグの 1 つであると確信しています。

ie7 javascript を使用してみてください - 問題が解決する場合があります: http://code.google.com/p/ie7-js/

于 2009-04-27T23:23:49.210 に答える