Pourcentage de mise en page ne pas additionner dans IE6

IE6 me donne des problèmes bien sûr. J'ai des problèmes avec ma mise en page en utilisant des pourcentages. Le code je ressemble à ce qui suit:Pourcentage de mise en page ne pas additionner dans IE6

<div style="width: 92%; margin-left: 4%; margin-right: 4%; background-color: red; height: 20px;"> 
     <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 23%; background-color: blue; height: 20px;"></div> 
     <div style="display: inline; float: left; margin-left: 1%; margin-right: 1%; width: 73%; background-color: yellow; height: 20px;"></div> 
    </div>

Ainsi, les deux internes divs les deux ont des marges à droite et à gauche de 1%, soit un total de 4% des marges. Ensuite, les largeurs sont de 23% et 73% pour un total de 96% de largeur pour les divisions internes. Donc, en ajoutant les marges et les largeurs ensemble, nous arrivons à un bon 100%.

Mais IE6 pour une raison quelconque n'est pas d'accord, et casse mes deux divs intérieurs et place chacun sur une nouvelle ligne. Quelqu'un sait-il pourquoi? Cela fonctionne pour tous les autres navigateurs. J'ai pris soin de tous les bugs IE6 que je pouvais penser. L'affichage: inline devrait prendre en charge le bug de double marge, et cela ne semble pas être un problème.

est ici l'url si quelqu'un veut le voir en action: http://dev1.twinmed-dev.com/test.html

Merci pour toute aide!

Source

2009-12-18 MackDaddy

Vous devrez peut-être lire à nouveau la 960 Spec. Vous utilisez l'alpha et l'oméga ensemble sur le même élément de temps en temps. – Sampson

"Le seul problème que j'ai est avec IE6." Classique. –

IE6 est pas bon à travailler en pourcentages est de la taille du problème:

http://www.positioniseverything.net/explorer/percentages.html

Vous remarquerez que si vous redimensionnez lentement la fenêtre dans IE6 et les remboursements de la page, chaque maintenant et encore une fois vos 2 divs vont s'asseoir magiquement sur la même ligne que vous vouliez.

J'ai toujours trouvé une solution de contournement fiable à ce problème (en dehors de ne pas utiliser les pourcentages), c'est de m'assurer que le total est toujours de 99%. Évidemment, cela peut parfois compromettre la mise en page, mais l'utilisation d'une seule règle IE6 conditionnelle-commentée minimise l'effet.

Source

2009-12-18 12:43:03

IE6 est un déchet à des pourcentages en mode Standards.

L'article positioniseverything est probablement l'un des plus illisibles sur Internet, mais la réponse simple est qu'il n'y a pas de réponse simple. La largeur 99% résoudrait le problème, mais toute personne travaillant sur une mise en page de concepteur ne sera pas capable de tolérer ce genre d'erreur.

Ma solution est de calculer les pourcentages vous-même, en utilisant des expressions, dans votre feuille de style IE.

Mon cas de test est la suivante:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb"> 
<head></head> 
<body> 
    <div style="width:50%;float:left">Left</div> 
    <div style="width:50%;float:left">Right</div> 
</body> 
</html>

qui saute partout dans le magasin lorsque vous redimensionnez la fenêtre du navigateur.

Et je peux modifier pour IE6 comme ceci:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb"> 
<head></head> 
<body> 
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Left</div> 
    <div style="width:expression(this.parentNode.offsetWidth/2);float:left">Right</div> 
</body> 
</html>

Source

2010-02-04 09:54:34 kenneth

Pourcentage de mise en page ne pas additionner dans IE6

Répondre

Questions connexes