IE不清除后续浮动

Question

IE不清除后续浮动

dku*_*ler 3 css internet-explorer clear css-float

我试图让两个div浮动到页面的两侧,文本在它们之间流动.第二个(左对齐)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;
}

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ste*_*rds 6

IE7和IE6存在各种各样的问题,这些元素同时包含float和存在clear.在IE7中,clear在元素上使用float仅清除浮动在同一方向上的其他浮动下方的浮动.

easyclearing修复版的修改版本可以解决问题,但不要让你的希望得到满足.有关详细信息,请参阅此页:IE7需要新的清除方法？.

最重要的是,你可能不会在没有作弊的情况下让它在IE6/7中工作:在文本中移动div,在段落中嵌入div等.

归档时间：	16 年，9 月前
查看次数：	2321 次
最近记录：	13 年，9 月前