1. Accueil
  2. Question et réponse
  3. Comment empêcher l'encapsulation flottante lorsque le zoom de Firefox est réduit

Comment empêcher l'encapsulation flottante lorsque le zoom de Firefox est réduit

2009-08-13 4 views
17

Étant donné le code HTML suivant. Il affiche deux colonnes: #left, #right. Les deux sont de largeur fixe et ont des frontières 1px. La largeur et les bordures sont égales à la taille du conteneur supérieur: #wrap.Comment empêcher l'encapsulation flottante lorsque le zoom de Firefox est réduit

Lorsque je fais un zoom arrière sur Firefox 3.5.2 en appuyant sur Ctrl + - les colonnes sont encapsulées (demo).

Comment prévenir cela?

<!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" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test</title> 
    <style type="text/css"> 
     div   {float:left} 
     #wrap   {width:960px} 
     #left, #right {width:478px;border:1px solid} 
    </style> 
    </head> 
    <body> 
    <div id="wrap"> 
     <div id="left"> 
     left 
     </div> 
     <div id="right"> 
     right 
     </div> 
    </div> 
    </body> 
</html>

Source

2009-08-13 Dmitri Zhuchkov

Répondre

1

Je ne suis pas sûr de bien comprendre votre situation. Réduire le zoom devrait en effet faire un zoom arrière. Êtes-vous en train de dire que lorsque vous effectuez un zoom arrière, les colonnes s'enroulent?

Vous devriez flotter ces divs en utilisant ce code dans votre CSS:

#container {width: 960px} 
#left {float: left} 
#right {float: right}

Si cela ne fonctionne pas, vous pouvez essayer de laisser un petit espace entre les colonnes en ajustant la largeur pour compenser quelques petits écarts de navigateur.

ÉDITÉ (ne pas tenir ci-dessus):

Voyant que vous me avez fourni plus d'informations, je dois vous dire que le navigateur intègre l'arrondi lors du redimensionnement et ayant ces exacte taille de pixel parfait est pas chose la plus intelligente à faire.

Au lieu de cela, vous pouvez avoir un div ont une largeur absolue et l'autre pour avoir une largeur automatique comme ceci:

#container {width: 960px;} 
#left {width: 478px;} 
#right {width: auto;}

Cela aura le navigateur prendre comme beaucoup d'espace pour #right comme on peut éventuellement prendre à l'intérieur de la div #wrap. Assurez-vous de définir une largeur pour l'habillage, sinon cela prendra 100% de la fenêtre.

J'espère que cela aide!

ÉDITÉ:

droit est très proche de votre largeur fixe, parce que vous avez défini la largeur de votre récipient déjà, il est tout simplement la largeur du conteneur soustraites par la largeur du côté gauche. Ceci est simplement pour s'assurer qu'il n'y a pas de divergence lors du redimensionnement de la fenêtre. Je comprends qu'il n'occupera pas toute la surface de l'espace, cependant, au fur et à mesure que le contenu est ajouté, le maximum sera le conteneur - largeur de gauche. Essayez-vous d'appliquer un arrière-plan? Dans ce cas, réglez l'arrière-plan du côté droit comme arrière-plan du conteneur, puis le côté gauche comme arrière-plan du côté gauche (assurez-vous qu'il couvre la moitié).

J'espère avoir aidé.

Source

2009-08-13 19:44:48

+0

J'ai étendu ma question avec une démo. Le flotteur droit et gauche n'aidera pas. Réduire la largeur des colonnes aide mais est-ce seulement une option disponible? –

+0

J'ai mis à jour mon exemple ci-dessus. –

+0

#right {width: auto;} aide à l'encapsulation mais cela ne fait pas #rouge largeur fixe. Si #right n'a pas assez de contenu, il sera plus petit que 478px; –

0

Le problème est dû à la largeur de votre #wrap.

J'ai défini la largeur à 100% et il ne se casse plus dans Firefox en zoomant avec CTRL -.

Source

2009-08-13 21:09:55 ChrisBenyamin

+1

Oui, mais s'ils veulent définir la largeur à 960px pour une raison (par exemple, pour utiliser le système de grille 960.gs) ou s'ils souhaitent centrer le contenu, ils devront définir une largeur pour le conteneur. –

8

Dmitri,

Lorsque le navigateur caluclates la nouvelle largeur de vos divs après que vous effectuez un zoom, il ne faut pas réduire les deux 478px + 4px des éléments de bordure en proportion du 960px unique.Donc, vous vous retrouvez avec ceci:

Vos styles originaux:

#wrap equals 960px wide 
#left & #right, plus border equals 960px wide

Tout s'intègre bien.

Zoom réduite (ctrl)

#wrap equals (approx.) 872px wide. 
#left, #right, plus border eqauls 876px wide. 
(left and right reduce to approx 436px each, plus 4 px of border)

Le contenu est trop large pour #wrap. Pour voir & mesurer cela suffit d'appliquer une couleur de fond à #wrap.

Pour réparer, retirez la largeur de #wrap. Parce qu'il est flottant, il va se plier pour s'adapter au contenu. Cependant, vous devez appliquer une largeur aux éléments flottants et votre div {float: left} l'applique à #wrap.

Supprimez le style div {float: left} et ajoutez float: left to #left, #right.

#left, #right {float:left;width:478px;border:1px solid}

Si vous voulez #wrap être centré, vous devrez déclarer une largeur de nouveau et ajouter margin: 0 auto ;, dans ce cas, vous aurez à nouveau ce problème [edit: ou vous pouvez, comme chris indiqué, régler la largeur à 100%]. Il suffit donc de recalculer la largeur de #left, #right pour qu'ils correspondent. Je crois comprendre qu'il est bon de laisser un peu de marge de manœuvre entre la largeur des éléments parents et enfants pour éviter ce genre de problème de toute façon.

Source

2009-08-13 21:13:15

13

Essayez de passer à un autre box model comme suit:

#left, #right 
{ 
    width:480px; 
    border:1px solid; 
    box-sizing: border-box; 

    /* and for older/other browsers: */ 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box 
}

Source

2009-08-13 21:20:29

+0

Cela a résolu mon problème. J'ai utilisé le mixage de Compass: http://compass-style.org/reference/compass/css3/box_sizing/ – jedmao

+0

Quelqu'un peut-il expliquer pourquoi cela arrive? J'ai eu le même problème sur mon site, [Goodwill Fire 18] (http://www.goodwillfire18.com/). Le "News Feed" et la barre latérale droite sont flottants à gauche et à droite. La barre latérale droite a une bordure similaire à celle de l'OP. Lorsque vous effectuez un zoom arrière dans Firefox, il place la barre latérale droite en bas. – Kayla

1

je la lutte avec ce bug aussi. J'avais un onglet de navigation avec des largeurs fixes sur chaque onglet et une marge droite totalisant la largeur du conteneur div.

J'ai effectivement découvert une nouvelle solution, qui semble fonctionner très bien. La navigation par onglets est bien sûr enveloppée dans une balise ul. J'ai mis une largeur sur cette étiquette ul d'environ 6px plus grand que le conteneur div. Ainsi, par exemple, div conteneur est de 952px de large, puis ul tag est de 958px de large. Puisque les étiquettes de navigation dans la navigation sont flottantes vers la gauche et ont des largeurs fixes, elles ne dépasseront pas 952px, cependant l'élément ul a une certaine marge de manœuvre, ce qui semble être nécessaire pour écraser ce bug. J'ai essayé de faire un zoom arrière sur Firefox et IE7/8 et les onglets restent en place.

Espérons que cela aide quelqu'un à économiser quelques minutes/heures!

Source

2010-11-24 03:36:48 dfw

2

J'ai eu un problème similaire. Définir #right à une marge négative travaillé. Par exemple:

#right{ 
    margin-right:-400px; 
}

Source

2011-03-23 12:32:48 stiopa

1

Ok les gars, quand vous avez un div à hauteur fixe, afin d'éviter un zoom de briser tout, ajouter overflow:hidden à sa css. Cela a fait l'affaire pour moi et maintenant chaque navigateur peut faire un zoom fou.:)

Source

2011-12-15 20:01:01

0

Meilleure solution pour corriger le bug flottant dans tous les cas est l'utilisation de la disposition de table en utilisant tds. Cela ne perdra jamais de flottement.

Source

2014-05-28 10:13:23

Questions connexes

 Questions connexes