IE7 float right problèmes

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

Question

Html = > 

<!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>
</head>
<body>
  <div style='border: 1px solid red; width: 100px;'>
    <a href="#">foo</a>
    <a href="#"style="border-color: blue; float: right;">bar</a>                
  </div>
something
</body>
</html>

J'ai eu des problèmes avec IE7 (le support IE6 n'est pas nécessaire)

Sur IE7, le rendu du code HTML est le suivant: >
alt text

J'en ai besoin pour ressembler à ceci (fonctionne sur chrome / ie8 pour le moment) = >
alt text

Que devrais-je changer? :)

Était-ce utile?

La solution

Vous devez faire flotter les deux éléments et 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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#" style="float:left;">foo</a>            
    <div style="clear:both;"></div>
  </div>
something
</body>
</html>

Ou simplement, placez l'élément flottant devant l'élément normal comme ceci: 

<!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>
</head>
<body>
  <div style="border: 1px solid red; width: 100px;">
    <a href="#" style="border-color: blue; float: right;">bar</a>    
    <a href="#">foo</a>            
  </div>
something
</body>
</html>

Brève explication:

Pardonnez mon anglais et mon dessin, mais voici brièvement comment fonctionnent les fonctions float et clearing dans le navigateur croisé:

Un élément peut être flotté à gauche ou à droite. Lorsque l'élément est flottant, l'élément ne pousse pas " normal " contenu vers le bas. Voyez pourquoi -

Flottez et effacez

alt text
Légende: orange / droite flottante, bleue / gauche flottante, lignes grises / séparation claire, rectangle rouge / borne

Dans ce cas, vous avez 2 éléments d'un texte de ligne, l'un à gauche et l'autre à droite. En flottant, il ne pousse pas le contenu vers le bas, c'est-à-dire qu'il prend de la place. Ainsi, si vous n'utilisez pas clear: les deux au niveau des lignes grises, le contenu ci-dessous s'empilera vers le haut entre les 2 éléments flottants et risque donc de ne pas être ce que vous voulez.

Lorsque vous utilisez clear: les deux situés sous les flottants, le contenu situé sous les flottants est poussé aussi loin que l'élément flottant est de la plus haute hauteur. Ceci est indiqué dans les deuxième et troisième sections du diagramme.

Flotter uniquement:

alt text
Légende: Orange / Float Right, contenu bleu / normal, lignes grises / la ligne divisée par la suivante, Red Rect / bounds

Le contenu bleu normal est déjà par défaut text-align: left; . Ainsi, il est orienté à gauche. Le flottant doit se trouver devant le contenu normal, car vous indiquez au navigateur de flotter à partir de cette ligne.

Vous devriez expérimenter différentes conditions pour voir son effet: mettre un flotteur devant, derrière, un flotteur à gauche, un clair à la fois, clair à droite et à gauche.

Autres conseils

Toujours utile pour tous les combos IE-Float-Combos: attribuez à chaque élément float un : inline;

Essayez le correctif clair après: 

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top