IE 6/7 et les flotteurs

Mon front est meurtri par frustration sur ce problème. Dans les navigateurs compatibles avec les normes, ma mise en page semble bien, mais, bien sûr, IE7 et IE6 aiment faire un gros désordre de tout. J'essaye de faire un en-tête simple qui a du texte à gauche et un formulaire en ligne sur la droite. L'en-tête est large de 835px et centré en utilisant des marges automatiques. Voici mon code:IE 6/7 et les flotteurs

<div id="header"> 
    <span>Some Text</span> 
     <div style="display: inline; float: right; margin-top: 6px; position: relative;"> 
      Jump to: <form ... style="display: inline;"> blah blah </form> 
     </div> 
</div>

Pour autant que je peux dire IE6/7 Traitez-la div contenant la forme comme un élément de bloc. Il est correctement affiché sur la droite de la div en-tête mais est repoussé vers le bas. J'ai essayé de donner à la division intérieure une largeur et une position absolue mais en vain. Je voudrais en fait éviter le positionnement absolu ainsi que les énoncés conditionnels si possible. Il doit y avoir quelque chose que je néglige. Aucune suggestion?

MISE À JOUR: Voici une capture d'écran de IE7 alt text http://vincentalcivar.com/ie7.png

Source

2010-07-24 vince88

Remplacez <span>Some Text</span> par <span style="float: left;">Some Text</span>.

En outre, vous souhaiterez peut-être supprimer pour supprimer margin-top: 6px; position: relative; du DIV.

Editer: Voici le code.

<div id="header"> 
    <span style="float: left;">Some Text</span> 
    <div style="display: inline; float: right;"> 
    Jump to: <form style="display: inline; margin: 0;"> blah blah </form> 
    </div> 
    &nbsp; 
</div>

Ajout d'un   (et retiré du overflow: auto;), étant donné que IE6 pense que la ligne n'a pas de contenu après les flotteurs.

Source

2010-07-24 13:18:17

Cela semble fonctionner pour IE, mais les autres navigateurs affichent incorrectement le reste du contenu de la page. Je vais examiner peut-être changer les propriétés des autres éléments et voir si cela fonctionne. – vince88

hmm. Jusqu'à présent, la solution semble ajouter

après le div interne, et cela résout le problème avec le reste du contenu et le rend également bien dans tous les navigateurs. Ce n'est probablement pas la solution la plus élégante, car elle ajoute plus de balisage. Y a-t-il un meilleur moyen? – vince88

Maintenant, cela fonctionne bien dans tous les navigateurs ... et oui, dans IE6 ainsi. :) –

Je ne sais pas pourquoi vous avez marqué les éléments que vous avez, mais pour un texte à gauche et une forme à droite, je aurait fait ce qui suit:

<div id="header"> 
    <div id="text_holder"> 
     <p>Lorem ipsum dolor set amet.</p> 
    </div> 
    <form> 
     ... 
    </form> 
</div>

Et le CSS suivant:

#header { 
    width: 835px; 
    margin: 0 auto; 
    overflow: auto; 
} 
#text_holder { 
    float: left; 
} 
#header form { 
    float: right; 
}

Source

2010-07-24 13:11:19

Je n'ai pas accès à IE6/7 pour le moment. Cependant, il y a des bogues flottants avec chacun de ces navigateurs. L'ajout d'une propriété CSS de zoom: 1 déclenchera hasLayout pour ces éléments et les aidera à afficher comme prévu.

Bien que vous n'ayez pas besoin d'ajouter cela via une feuille de style conditionnelle, je le recommande car il s'agit d'un correctif spécifique au navigateur.

Il est possible que certains de vos autres styles soient en conflit. Je ne suis pas sûr si vous essayiez de résoudre le problème, mais display: inline ne devrait pas être nécessaire.

Il peut être utile de poster une capture d'écran de l'aspect des choses dans IE6/7.

Source

2010-07-24 13:14:56

IE 6/7 et les flotteurs

Répondre

Questions connexes