Problème de mise en page IE6 - positionnement absolu

Le code HTML suivant est requis dans Firefox 2 & 3 et IE7. Le bouton Left est sur la gauche, le bouton Right est sur la droite, et le texte au milieu est ... au milieu!Problème de mise en page IE6 - positionnement absolu

Toutefois, sur IE6, le bouton Left est désaligné - il est aligné au centre.

Quelqu'un peut-il suggérer pourquoi ??

<!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> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     DIV#Footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
     } 
     DIV#Footer INPUT 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0px; 
     } 
     DIV#Footer INPUT.right 
     { 
      right: 0px; 
     } 
     DIV#Footer INPUT.left 
     { 
      left: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="Footer"> 
     <input class="left" type="button" value="Left" /> 
     Some text in the middle 
     <input class="right" type="button" value="Right" /> 
    </div> 
</body> 
</html>

(J'utilise l'outil de développement IE pour essayer d'analyser et de résoudre ce problème, mais en vain ...)

Source

2009-02-11 Richard Everett

Vous devez déclencher la propriété hasLayout (une chose IE ...) de #footer. La largeur et la hauteur le déclenchent. Si vous ne souhaitez pas définir une largeur ou une hauteur, vous pouvez utiliser la propriété zoom d'IE uniquement dans CSS.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Layout problem!</title> 
    <style type="text/css"> 
     div#footer 
     { 
      padding: 10px; 
      color: #fff; 
      background-color: #484848; 
      position: relative; 
      text-align: center; 
      zoom: 1; 
     } 
     div#footer input 
     { 
      margin: 5px 15px; 
      position: absolute; 
      top: 0; 
     } 
     div#footer input.right 
     { 
      right: 0; 
     } 
     div#footer input.left 
     { 
      left: 0; 
     } 
    </style> 
</head> 
<body> 
    <div id="footer"> 
     <input class="left" type="button" value="Left"> 
     Some text in the middle 
     <input class="right" type="button" value="Right"> 
    </div> 
</body> 
</html>

IIRC, dans IE, les éléments ont deux comportements de mise en page différentes, une si hasLayout est true, et une autre si elle est false. S'assurer que c'est réglé à true peut résoudre beaucoup de problèmes de mise en page étranges comme celui-ci.

Source

2009-02-11 17:24:35 nlogax

C'est tout à fait l'inverse! Merci Jonas. Cela fonctionne presque parfaitement - il semble pousser la largeur de mon contenant div de quelques pixels dans IE6. –

Le réglage du zoom modifie le curseur. Peut vouloir limiter cela à IE6 en ajoutant un _ à la règle. –

Je ne vois pas de problèmes de changement de curseur Bjorn –

Vos éléments flottants/positionnés devraient être le premier dans l'ordre avant le texte normalement aligné. Ne les positionnez pas dans l'ordre où ils apparaissent.

Vous pouvez également ajouter un! Important pour augmenter la priorité et utiliser la barre d'outils IE Developer de Microsoft pour voir quelles règles entrent en vigueur. Quelle est la largeur de l'élément parent?

On dirait que ça devrait marcher.

Source

2009-02-11 17:13:00

Merci, mais cela ne semble pas changer les choses. Aussi, cela gâcherait les choses pour les utilisateurs qui utilisent un lecteur d'écran. –

Essayez cette (pardonnez le style en ligne!)

<div id="Footer"> 
    <div style="width:100%"> 
    <input class="left" type="button" value="Left" /> 
    Some text in the middle 
    <input class="right" type="button" value="Right" /> 
    </div> 
    </div>

Source

2009-02-11 17:14:36 AJM

Assez excellent - merci AJM! Cependant, dans IE6, il y a maintenant un écart de 20px entre le gauche du bouton Gauche et le bord du pied de page ... –

Je vais suggérer un peu de chance à votre approche et de voir si vous avez un peu de chance avec ceci:

<style type="text/css"> 
    DIV#Footer 
    { 
     padding: 10px; 
     color: #fff; 
     background-color: #484848; 
     position: relative; 
     text-align: center; 
    } 
    DIV#Footer INPUT 
    { 
     margin: 5px 15px; 
     position: absolute; 
     top: 0px; 
    } 
    DIV#Footer INPUT.right 
    { 
     float: right; 
    } 
    DIV#Footer INPUT.left 
    { 
     float: left; 
    } 
    #Footer .center { 
     float: left; 
    } 

</style>

Puis dans le code HTML

<div id="Footer"> 
    <input class="right" type="button" value="Right" /> 
    <input class="left" type="button" value="Left" /> 
    <div class="center">Some text in the middle</div> 
</div>

Vous auriez alors pour passer à travers et leur donner des marges pour les aligner comme vous les voulez. Cela ne fonctionnera pas pour une mise en page fluide, sauf si vous donnez au pied de page, ou un conteneur dans le pied de page pour ces éléments une largeur fixe.

Source

2009-02-12 01:26:53 Matt

Cela ne semble pas fonctionner du tout j'ai peur Matt ... –

Comme jonas a dit. En cas de doute, je recommande de spécifier explicitement une largeur, même si ce n'est pas obligatoire, et je préfère l'utiliser sur «zoom» car le zoom n'a pas été conçu pour résoudre le problème de mise en page. Définir explicitement une largeur n'est pas toujours possible, donc "zoom" fait l'affaire.

Source

2009-02-12 23:19:51

Une autre option que j'ai trouvée a fonctionné pour moi pour traiter des balises div en position absolue dans ie6 est d'ajouter à la fois les valeurs gauche et droite dans le CSS.

C'est simple maths si vous connaissez la largeur des divs avec lesquelles vous travaillez.

Semble «agrafer» la boîte div en place.

J'ai essayé toutes les autres suggestions que j'ai lues (y compris javascript pour forcer ie6 à se comporter comme c'est ie7 ou ie8) mais elles n'ont pas fonctionné.

La solution ci-dessus a fait.

Bonne chance!

Source

2010-02-09 20:54:53

Problème de mise en page IE6 - positionnement absolu

Répondre

Questions connexes