Wie verhindert man das Verschieben des schwebenden Layouts, wenn der Firefox-Zoom verkleinert wird

Gegeben das folgende HTML. Es zeigt zwei Spalten an: #left, #right. Beide sind feste Breite und haben 1px Grenzen. Breite und Ränder entsprechen der Größe des oberen Behälters: #wrap.Wie verhindert man das Verschieben des schwebenden Layouts, wenn der Firefox-Zoom verkleinert wird

Wenn ich Firefox 3.5.2 verkleinern durch Drücken von Strg + - Spalten werden umbrochen (demo).

Wie kann dies verhindert werden?

<!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>

Quelle

2009-08-13 Dmitri Zhuchkov

Ich bin mir nicht sicher, ob ich Ihre Situation völlig verstehe. Die Verkleinerung des Zooms sollte eigentlich herauszoomen. Willst du damit sagen, dass wenn du rauszoomst, die Spalten umhergehen?

Sie sollten diese divs mit diesem Code in Ihrem CSS float:

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

Wenn dieser Versuch nicht funktioniert, kann einen kleinen Raum zwischen den Säulen zu verlassen, indem die Breite für einige kleine Browser Abweichungen zu kompensieren anpassen.

EDITED (ignorieren oben):

, wie Sie mir weitere Informationen zur Verfügung gestellt haben Sehen, ich muss Ihnen sagen, dass der Browser Rundung enthält, wenn die Größenänderung und diese genaue pixelgenaue Dimensionierung aufweist, ist nicht die klügste Sache zu tun.

Stattdessen können Sie haben ein div eine absolute Breite haben und die andere wie so eine automatische Breite haben:

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

Dies wird der Browser so viel Platz für #right nehmen wie möglich getroffen werden innerhalb der # wrap div. Stellen Sie sicher, dass Sie eine Breite für den Umbruch festlegen, andernfalls wird 100% des Fensters benötigt.

Ich hoffe, das hilft!

EDITED:

Recht ist sehr nah an Ihre feste Breite, weil Sie die Breite des Containers bereits definiert, so ist es einfach die Behälterbreite durch die Breite der linken Seite abgezogen. Dies soll lediglich sicherstellen, dass es bei der Größenänderung des Fensters keine Diskrepanz gibt.

Ich verstehe, dass es nicht den gesamten Bereich des Raumes einnehmen wird, jedoch wird, wenn Inhalt hinzugefügt wird, das Maximum, das es gehen wird, Container - linke Breite sein. Versuchen Sie einen Hintergrund anzuwenden? Legen Sie in diesem Fall den Hintergrund der rechten Seite als Hintergrund des Containers und dann die linke Seite als Hintergrund der linken Seite fest (stellen Sie sicher, dass sie die Hälfte davon bedeckt).

Ich hoffe, ich habe geholfen.

Quelle

2009-08-13 19:44:48

Ich erweiterte meine Frage mit Demo. Der rechte und linke Schwimmer wird nicht helfen. Reduzieren der Breite der Spalten hilft, aber ist es nur eine verfügbare Option? –

Ich habe mein Beispiel oben aktualisiert. –

#right {width: auto;} hilft beim Umbruch, aber das macht nicht die richtige feste Breite. Wenn #right nicht genug Inhalt hat, dann ist es kleiner als 478px; –

Das Problem wird durch die Breite Ihrer #Wrap verursacht.

Ich habe die Breite auf 100% eingestellt und es bricht nicht mehr in Firefox beim Herauszoomen mit STRG -.

Quelle

2009-08-13 21:09:55 ChrisBenyamin

Ja, aber wenn sie die Breite aus einem bestimmten Grund auf 960 px setzen möchten (zB um das Rastersystem 960.gs zu verwenden) oder wenn sie den Inhalt zentrieren möchten, müssen sie eine Breite für den Container festlegen. –

Dmitri,

Wenn der Browser caluclates die neue Breite des div-Tags, nachdem Sie zoomen, es hat nicht die zwei 478px + reduzieren 4px von Randelemente im Verhältnis zur Einzel 960px.So können Sie mit diesem Ende:

Ihre ursprünglichen Stile:

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

Alles paßt gut.

Zoom reduziert (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)

Inhalte sind zu breit für #wrap. Um & zu sehen messen Sie einfach eine Hintergrundfarbe auf #wrap.

Um zu beheben, entfernen Sie Breite von #wrap. Da es schwebt, wird es nicht passen. Sie sollten jedoch eine Breite auf float-Elemente anwenden, und Ihr div {float: left} wendet es auf #wrap an.

Entfernen Sie das Format div {float: left}, und fügen Sie float hinzu: left to #left, #right.

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

Wenn Sie zentriert #wrap werden möchten, dann müssen Sie eine Breite für sie wieder erklären und Rand hinzuzufügen: 0 auto ;, in dem Fall, dass Sie dieses Problem wieder haben werden [edit: oder Sie können, wie von Chris angegeben, die Breite auf 100% setzen]. Berechnen Sie einfach die Breite von #left, #right, so dass sie passen.

Es ist mein Verständnis, dass ein wenig Spielraum zwischen der Breite der Eltern- und Kind-Elemente ist gut, um diese Art von Problem sowieso zu vermeiden.

Quelle

2009-08-13 21:13:15

Versuchen Sie, eine andere box model Schalt wie folgt:

#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 
}

Quelle

2009-08-13 21:20:29

Das löste mein Problem. Ich habe das Compass-Mix-In verwendet: http://compass-style.org/reference/compass/css3/box_sizing/ – jedmao

Kann mir jemand erklären, warum es passiert? Ich hatte das gleiche Problem auf meiner Seite, [Goodwill Fire 18] (http://www.goodwillfire18.com/). Sowohl der "News Feed" als auch die rechte Seitenleiste sind nach links und rechts verschoben. Die rechte Seitenleiste hat einen Rand, ähnlich den OPs. Wenn Sie in Firefox verkleinern, wird die rechte Seitenleiste unten angezeigt. – Kayla

begegnete ich das gleiche Problem oben beschrieben. Nachdem ich hoffnungslos ein paar Minuten im Internet herumgelaufen bin, habe ich herausgefunden, dass es anscheinend ein Bug in Firefox 3.5.x und IE 7/8 ist. Der Fehler ist noch zu diesem Zeitpunkt vorhanden.

Um hier gehen, um mehr über den Fehler zu sehen: http://markasunread.com/?p=61 (früher http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/)

Quelle

2010-03-25 12:20:45 detj

Fehler existiert immer noch auf Firefox 29.0.1 – Kayla

ich mit diesem Fehler zu ringe. Ich hatte eine Tab-Navigation mit festen Breiten auf jeder Registerkarte und einem rechten Rand, die alle die Breite des Container-Div.

Ich entdeckte tatsächlich eine neue Lösung, die gut zu funktionieren scheint. Die Tab-Navigation ist natürlich in einem ul-Tag verpackt. Ich habe eine Breite auf diesem ul Tag von etwa 6px größer als der Container div. Zum Beispiel ist Container div 952px breit, dann ist ul tag 958px breit. Da die li-Tags in der Navigation nach links verschoben sind und feste Breiten haben, werden sie nicht über 952px hinausgehen, aber das ul-Element hat etwas Luft zum Atmen, was notwendig scheint, um diesen Bug zu quetschen. Ich habe versucht, in Firefox und IE7/8 zu verkleinern und die Tabs bleiben an Ort und Stelle.

Hoffen, das hilft jemand sparen ein paar Minuten/Stunden!

Quelle

2010-11-24 03:36:48 dfw

Ich hatte ähnliches Problem. Die Einstellung von #right auf einen negativen Rand hat funktioniert. Zum Beispiel:

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

Quelle

2011-03-23 12:32:48 stiopa

Ok Jungs, wenn Sie ein div mit fester Höhe haben, um Zoom von Zerschlagung alles zu verhindern, fügen Sie overflow:hidden es css ist. Das hat den Trick für mich gemacht und jetzt kann jeder Browser verrückt werden.:)

Quelle

2011-12-15 20:01:01

Die beste Lösung, um in jedem Fall schwebenden Fehler zu beheben, ist Verwendung Tabellenlayout mit tds. Das wird nie schweben.

Quelle

2014-05-28 10:13:23

Wie verhindert man das Verschieben des schwebenden Layouts, wenn der Firefox-Zoom verkleinert wird

Antwort

Verwandte Themen