IE不清除後續浮動

我試圖讓兩個div浮動到頁面的兩邊，文本之間流動。第二個（左對齊）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>

來源

2009-04-27 dkuchler

什麼是你的問題？這絕對是一個錯誤，它在IE8中是固定的，但IE中的錯誤並不是什麼新東西。你想使它在IE7中工作，或只是爲了確保它是一個錯誤？ – 2009-04-27 20:49:31

是的，我試圖讓它在IE6/7中工作。 – dkuchler 2009-04-27 21:04:37

IE7和IE6有一個variety of problems與既有float和clear他們的元素。在IE7中，在float的元素上使用clear僅清除浮動在其他浮動下的浮動浮動在相同方向。

修正版的easyclearing修復可能會訣竅，但不要讓你的希望。詳情請見本頁：New clearing method needed for IE7?。

底線是，你可能不會得到這個在IE6/7工作，沒有作弊：移動DIV下來的文字，嵌入在段落的div等

來源

2009-04-27 22:48:42

我相當當然，這是ie6中那些並沒有純粹的CSS解決方案的罕見錯誤之一。

嘗試使用IE7的JavaScript - 它可能會解決你的問題：http://code.google.com/p/ie7-js/

來源

2009-04-27 23:23:49 wheresrhys

IE不清除後續浮動

回答

相關問題