web-dev-qa-db-fra.com

IE7 float right problèmes

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 HTML ressemble à ceci =>
alt text http://i48.tinypic.com/saxs9d.jpg

J'ai besoin qu'il ressemble à ceci (fonctionne sur chrome/ie8 pour le moment) =>
alt text http://i49.tinypic.com/2ufgbr4.jpg

Que devrais-je changer? :)

cssinternet-explorerinternet-explorer-7
48
Arnis Lapsa

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, il ne pousse pas le contenu "normal" vers le bas. Voyez pourquoi -

Flotter et clair:

alt text
Légende: Orange/Float Right, Bleu/Float Left, Lignes grises/Diviseur transparent, Rect Rouge/Délimités

Dans ce cas, vous avez 2 éléments d'un texte de ligne, l'un flottant à gauche et l'autre flottant à 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:both 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:both sous les flottants, le contenu situé sous les flottants est poussé aussi loin que l’un des éléments les plus hauts. Ceci est montré dans les 2ème et 3ème sections du diagramme.

Flotter seulement:

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. Vous devez avoir le flottant 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 à droite, clair à la fois, clair à droite et à gauche.

96
mauris

Toujours utile pour tous les combos IE-Float: Donner display: inline; à chaque élément float

1
Martin Labuschin

Essayez le clear after fix:

div:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
0
Lark