fixation comportement redimensionnement Chrome

Question

<div style="background-color:red;width: 300px;"> 


<div style="float:left;border:1px solid yellow;">AAA AAA AAA</div> 

<div style="float:left;border:1px solid green;">BBB BBB BBB</div> 


<div style="clear:both;"></div> 

</div> 

le code HTML ci-dessus coller ici: http://htmledit.squarefree.com/

Et puis effectuer un zoom arrière dans Chrome, vous verrez que <div> B sera finalement forcé vers le bas à la ligne suivante. Si vous faites la même chose dans Firefox et IE, les deux <div> A et B resteront sur la même ligne.

Ajouter un attribut de hauteur sur le parent <div> peut aider, mais si la hauteur du contenu n'est pas connue au préalable, cela ne sera pas possible.

Je voudrais savoir comment ce problème peut être résolu dans Chrome.

Un grand merci à vous tous.

EDIT: capture d'écran téléchargé ici une: http://img52.imageshack.us/i/screenshot1xd.jpg/

Answer 1

Sur votre premier div, ajoutez ceci:

<div style="background-color:red;width: 300px; white-space:nowrap;"> 

voir si cela aide.

Answer 2

Je ne peux pas reproduire cela non plus, mais il semble que vous ne faites que zoomer sur le texte et que je ne trouve pas cette option dans Chrome pour le moment. Cependant, vous devez garder à l'esprit que cela peut toujours arriver dans n'importe quel navigateur, si l'utilisateur substitue en quelque sorte le site de police que vous avez spécifié. Vous ne pouvez pas faire grand-chose d'autre que de garder votre disposition suffisamment flexible pour la gérer. Par exemple, dans ce cas, ne définissez pas la largeur de l'élément environnant en pixels, mais en em s afin qu'il soit relatif à la taille de la police.

Il peut y avoir d'autres solutions, comme l'utilisation d'autres méthodes de placement d'éléments les uns à côté des autres, mais cela nécessiterait que vous donniez un exemple plus concret de ce que vous essayez d'obtenir, en particulier en expliquant que vous ne voulez pas les éléments Envelopper.

Answer 3

fonctionne très bien sur mon Chrome 5.

Ce que je pourrais vous suggérer est de spécifier la largeur de la div parent dans « em » au lieu .. Bien qu'il semble que votre version de Chrome avait un bug , qui a déjà été corrigé :)

Une autre solution consiste à définir nowrap, comme proposé par @Kyle et au lieu de définir la largeur statique - définir la largeur minimale. De cette façon, la div va se développer, au lieu de faire envelopper les enfants à la deuxième ligne^_^

Answer 4

essayez d'utiliser l'attribut max-width!