IE n'efface pas les flottants suivants

J'essaye de faire flotter deux divs sur les côtés opposés de la page, avec du texte qui coule entre eux. Le sommet du second div (aligné à gauche) devrait être pair avec le bas du premier div (aligné à droite). Le code ci-dessous fonctionne très bien dans FF, Chrome, Opera, etc, mais ils ne disparaissent pas correctement dans IE. Les deux div apparaissent en haut du texte.IE n'efface pas les flottants suivants

Si je déplace le div aligné à gauche assez bas dans le texte, cela fonctionne bien dans IE, mais ce n'est pas vraiment une solution durable.

J'ai trouvé plusieurs pages sur les bogues flottants IE CSS, mais je n'ai rien trouvé qui parle directement à cela.

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>

Source

2009-04-27 dkuchler

Quelle est votre question? C'est certainement un bug, et il est corrigé dans IE8, mais les bugs dans IE ne sont pas quelque chose de nouveau. Voulez-vous le faire fonctionner dans IE7 ou juste pour vous assurer que c'est un bug? –

Oui, j'essaie de le faire fonctionner dans IE6/7. – dkuchler

Veuillez indiquer la version de IE que vous utilisez. – thejartender

IE7 et IE6 ont un variety of problems avec des éléments qui ont à la fois float et clear sur eux. Dans IE7, l'utilisation de clear sur un élément avec float efface uniquement le flotteur en dessous d'autres flotteurs flottant dans le même sens.

Une version modifiée du correctif easyclearing peut faire l'affaire, mais n'espérez pas. Voir cette page pour plus de détails: New clearing method needed for IE7?.

Bottom line est que vous allez probablement pas pour que cela fonctionne dans IE6/7 sans tricher: déplacer la div dans le texte, noyant les divs aux paragraphes, etc.

Source

2009-04-27 22:48:42

Cela m'a presque mis sur la bonne voie. J'ai dû me contenter d'un div invisible de 1px que je peux faire flotter au-dessus de la boîte de gauche. Cela va le pousser en dessous de la div 1px, dont je peux définir la hauteur. Pas ravi de la solution, mais aucun des autres solutions de contournement aidé avec IE6. – dkuchler

Je suis assez Bien sûr, c'est l'un de ces bugs rares dans IE6 qui n'a pas de solution CSS pure.

Essayez d'utiliser le javascript IE7 - il peut résoudre le problème pour vous: http://code.google.com/p/ie7-js/

Source

2009-04-27 23:23:49 wheresrhys

IE n'efface pas les flottants suivants

Répondre

Questions connexes