3

我试图让两个 div 浮动到页面的两侧，文本在它们之间流动。第二个（左对齐）div 的顶部应该与第一个（右对齐）div 的底部齐平。下面的代码在 FF、Chrome、Opera 等中运行良好，但在 IE 中无法正确清除。两个 div 都出现在文本的顶部。

如果我在文本中将左对齐的 div 移动到足够低的位置，它在 IE 中可以正常工作，但这并不是一个真正可持续的解决方案。

我在 IE CSS float bugs 上找到了多个页面，但我没有找到任何直接与此相关的内容。

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

我相当确定这是 ie6 中没有纯 CSS 解决方案的罕见错误之一。

尝试使用 ie7 javascript - 它可能会为您解决问题：http ://code.google.com/p/ie7-js/

于 2009-04-27T23:23:49.210 回答