Comment résoudre ce problème flottant CSS simple dans IE?

J'ai quatre éléments div flottant vers la gauche. Le troisième div est effacé.
Dans Firefox et Chrome, les éléments sont positionnés comme prévu: Les premier et deuxième div s sont adjacents les uns aux autres et sont au-dessus des troisième et quatrième div s qui sont également adjacents les uns aux autres.
IE7 d'autre part place le quatrième div adjacent à la première et la seconde div s avec le troisième div ci-dessous.Comment résoudre ce problème flottant CSS simple dans IE?

Je sais que je peux le réparer en ajoutant un élément br après le second div mais je préfère ne pas modifier le balisage si je n'ai pas à le faire. Y a-t-il un moyen plus élégant de régler le problème?

J'ai essayé Google pour un correctif pendant un certain temps mais je n'en ai pas trouvé un, ce qui est plutôt surprenant si l'on considère à quel point le problème semble élémentaire. Peut-être qu'il me manque quelque chose d'évident, y a-t-il un site de référence qui répertorie des problèmes CSS simples comme celui-ci ou suis-je simplement ignorant sur CSS de base?

Editer: J'ai rendu l'exemple de code un peu plus complexe après que Nazgulled ait "résolu" le problème (voir les commentaires). Il y a maintenant quatre div s au lieu de trois et le troisième div est effacé au lieu de la seconde.

Voici le code source complet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
     <title>IE Float Test</title> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <style type="text/css"> 
      div 
      { 
       width: 100px; 
       height: 100px; 
       color: white; 
       font-size: 3em; 
       float: left; 
      } 

      #divone 
      { 
       background-color: red; 
      } 

      #divtwo 
      { 
       background-color: blue; 
      } 

      #divthree 
      { 
       background-color: green; 
       clear: both; 
      } 

      #divfour 
      { 
       background-color: purple; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="divone">one</div> 
     <div id="divtwo">two</div> 
     <div id="divthree">three</div> 
     <div id="divfour">four</div> 
    </body> 
</html>

Voici ce qui est ressemble à Chrome:
Chrome sample http://img301.imageshack.us/img301/3135/chromev2tp4.png

Voici ce qui est ressemble à IE7:
IE Sample http://img111.imageshack.us/img111/8195/ie7v2cg3.png

Source

2009-01-25 brianpeiris

Plusieurs mois plus tard ...

J'ai renoncé à essayer de résoudre ce problème avec CSS seul. C'est un bug IE7 que vous ne pouvez pas éviter sans toucher votre code HTML.

L'application ultime de ce motif flottant était sous une forme, où deux des div s étaient des éléments d'entrée et les deux autres div s étaient leurs étiquettes correspondantes. Le motif a été utilisé plusieurs fois dans une grande forme et je voulais vraiment trouver une élégante solution CSS uniquement.

J'ai finalement fini par utiliser leet en enveloppant tous les éléments avec div s supplémentaires afin de créer la disposition désirée, comme dicte OOCSS. C'était le seul moyen de sauver mon âme de l'enfer CSS d'IE7 et OOCSS n'est pas si mal une fois que vous avez terminé votre mise en page initiale.

En vérité, la réponse générale est que c'est le genre de question que vous posez quand vous ne savez pas vraiment ce que vous faites avec CSS. Si vous devez créer une mise en page complexe une fois dans une lune bleue alors vous ne savez probablement pas ce que vous faites; comme ce fut le cas quand j'ai posé cette question.

Même s'il est vrai que IE7 ne parvient pas à rendre le CSS correctement, c'était aussi un cas de portée erronée de ma part. Le langage CSS n'est pas le langage de mise en page ultime qu'un programmeur naïf pourrait trouver et CSS n'est pas vraiment indépendant de la structure de votre code HTML. Une fois de plus, j'ai opté pour la solution la plus simple en utilisant le framework OOCSS alors que je devrais prendre le temps d'apprendre les bases du CSS.

Hélas, telle est la conséquence des délais.

Source

2009-10-04 07:06:17 brianpeiris

Essayez d'ajouter:

display:inline-block;

dans #divtwo. Si cela fonctionne, je bien sûr ajouter quelques commentaires conditionnels pour IE7

Source

2009-01-25 04:38:46 GregD

affichage: en ligne; devrait fonctionner pour IE6 – GregD

Essayez d'éviter les commentaires conditionnels. – Soviut

Je viens de l'essayer. affichage: inline-block n'a aucun effet dans IE7 – brianpeiris

Je ne sais pas si cela résout votre problème réel, mais je fixe votre échantillon comme ceci:

Retirez le flotteur attribut de div

Retirez le clair attribut de #divtwo

Ajouter float: left à #divtwo et #divthree

Cela fait ressembler à votre échantillon de chrome à la fois dans Firefox et IE 7 (navigateurs j'ai testé).

Source

2009-01-25 05:07:44

confirmé et upvoted que cela a fonctionné pour moi aussi. – GregD

Votre solution atteint le résultat sans résoudre le problème :) Comme vous l'avez deviné, cela ne résout pas mon "vrai problème". Je pense que je pourrais éditer la question légèrement pour éviter cette contournement (à moins que quelqu'un m'informe que c'est contre l'étiquette) – brianpeiris

J'ai édité la question. Merci pour votre solution alternative, Nazgulled. – brianpeiris

Je ne suis pas sûr de ce que votre but ultime est ici, mais je suggère enfermer les quatre <div> s dans un élément de récipient et l'application d'une largeur à elle, puis en enlevant le style clear de #divthree.En procédant ainsi, permettra #divthree et #divfour de se déplacer en dessous #divone et #divtwo sans les effacer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
     <title>IE Float Test</title> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <style type="text/css"> 
       #divone, #divtwo, #divthree, #divfour 
       { 
         width: 100px; 
         height: 100px; 
         color: white; 
         font-size: 3em; 
         float: left; 
       } 

       #divone 
       { 
         background-color: red; 
       } 

       #divtwo 
       { 
         background-color: blue; 
       } 

       #divthree 
       { 
         background-color: green; 
       } 

       #divfour 
       { 
         background-color: purple; 
       } 

       #container { 
         width: 200px; 
         zoom: 1; 
       } 
     </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="divone">one</div> 
     <div id="divtwo">two</div> 
     <div id="divthree">three</div> 
     <div id="divfour">four</div> 
    </div> 
    </body> 
</html>

La propriété zoom sur #container est nécessaire pour éviter la IE6/7 Escaping Floats Bug.

Si la solution ci-dessus n'est pas viable, vous pouvez ajouter un ou <br><div> après #divtwo avec le style clear: left;:

<div id="divone">one</div> 
<div id="divtwo">two</div> 
<br style="clear: left;" /> 
<div id="divthree">three</div> 
<div id="divfour">four</div>

C'est la technique utilisée dans a floated page layout example on westciv.com.

Source

2009-01-25 08:06:41 cowgod

Merci, mais, comme je l'ai mentionné, je préfère ne pas modifier le balisage. Je suppose que je suis à la recherche d'une solution CSS (sauf si je le fais complètement faux). L'application finale fera partie d'un formulaire, où les premier et troisième 'div's seront des cases à cocher et les deuxième et quatrième' div's seront leurs étiquettes. – brianpeiris

Refusée. Je ne pouvais pas résoudre ce problème avec CSS seul (voir ma réponse ci-dessous) et votre suggestion est une solution valide. – brianpeiris

Comment résoudre ce problème flottant CSS simple dans IE?

Répondre

Questions connexes