IE não limpar floats subseqüentes

StackOverflow https://stackoverflow.com/questions/795161

Pergunta

Eu estou tentando obter dois divs para flutuar para lados opostos da página, com texto que flui entre eles. A parte superior da segunda (alinhado à esquerda) div deve estar nivelado com a parte inferior da primeira div (alinhado à direita). O código abaixo funciona bem no FF, Chrome, Opera, etc. bem, mas eles não limpar corretamente no IE. Ambos os divs aparecem na parte superior do texto.

Se eu mover o alinhado à esquerda div baixo o suficiente dentro do texto, ele funciona bem no IE, mas isso não é realmente uma solução sustentável.

Eu encontrei várias páginas no IE erros CSS float, mas eu não encontrei nada falando diretamente para isso.

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>
Foi útil?

Solução

IE7 e IE6 tem um variedade de problemas com elementos que têm tanto float e clear neles. No IE7, usando clear em um elemento com float limpa apenas o flutuador abaixo de outros carros alegóricos flutuavam na mesma direção .

A versão da correção easyclearing modificado pode fazer o truque, mas não receber o seu esperanças. Veja esta página para mais informações:?. Novo método de compensação necessário para IE7

A linha inferior é que você provavelmente não vai chegar a este trabalho no IE6 / 7 sem fazer batota:. Mover a div para baixo no texto, incorporando os divs em parágrafos, etc

Outras dicas

Estou bastante certo de que este é um daqueles erros raros no IE6 que não tem uma solução CSS puro.

Tente utilizar o IE7 javascript - pode corrigir o problema para você: http: // code.google.com/p/ie7-js/

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top