2009-04-27 2 views
3

私は2つのdivをページの反対側に浮動させようとしています。 2番目の(左揃え)divの先頭は、最初の(右揃え)divの下端と均等になるはずです。下のコードはFF、Chrome、Operaなどで正常に動作しますが、IEでは正しくクリアされません。両方のdivがテキストの上部に表示されます。IEは後続の浮動小数点数をクリアしません

左揃えの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> 
+0

は何ですか?これは間違いなくバグであり、IE8で修正されていますが、IEのバグは新しいものではありません。 IE7で動作させたいのですか、それともバグかどうかを確認したいのですか? –

+0

はい、私はIE6/7で動作するようにしようとしています。 – dkuchler

+0

使用しているIEのバージョンを明記してください。 – thejartender

答えて

6

IE7とIE6はそれらの両方floatclearを持っている要素とvariety of problemsを持っています。 IE7では、floatの要素にclearを使用すると、他の浮動小数点以下の浮動小数点を除きます。は、同じ方向に浮動小数点になります

easyclearing修正の修正版では、このトリックを行うことができますが、期待をそらすことはできません。詳細はNew clearing method needed for IE7?のページをご覧ください。私はかなりよなど、

+0

これはかなり正しいトラックに私を置く。私は左のボックスの上に浮かべることができる1ピクセル幅の目に見えないdivを解決する必要がありました。それは1px divの下に下がります。その高さは設定できます。 解決策については興奮しませんでしたが、他の回避策のどれもがIE6を助けませんでした。 – dkuchler

0

を、テキスト内のdivを下に移動する段落内のdivを埋め込む:

ボトムラインは、あなたが、おそらくこれは不正行為なしでIE6/7で動作するように取得するつもりはないということです純粋なCSSソリューションを持たないie6のまれなバグの1つであることを確かめてください。

はIE7のJavaScriptを使用してみてください - それはあなたのための問題を解決することがあります。あなたの質問はhttp://code.google.com/p/ie7-js/