Jak zapobiec zawijaniu się układu podczas zmniejszania zoomu firefoxa

Biorąc pod uwagę następujący kod HTML. Wyświetla dwie kolumny: #left, #right. Oba mają ustaloną szerokość i mają granice 1 piksela. Szerokość i krawędzie są równe wielkości górnego pojemnika: #wrap.Jak zapobiec zawijaniu się układu podczas zmniejszania zoomu firefoxa

Po pomniejszeniu przeglądarki Firefox 3.5.2 przez naciśnięcie Ctrl + - kolumny zostają opakowane (demo).

Jak temu zapobiec?

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

Źródło

2009-08-13 Dmitri Zhuchkov

Nie jestem pewien, czy w pełni rozumiem twoją sytuację. Zmniejszenie powiększenia powinno w rezultacie pomniejszyć. Mówisz, że kiedy pomniejszasz kolumny, zawijaj je?

Należy unosić te DIV przy użyciu tego kodu w CSS:

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

Jeśli to nie zadziała, możesz spróbować pozostawiając niewielką przestrzeń między kolumnami przez regulację szerokości w celu zrekompensowania pewnych niewielkich rozbieżności przeglądarki.

EDITED (ignorować powyżej):

Widząc jak podałeś mi więcej informacji, muszę ci powiedzieć, że przeglądarka wykorzystuje zaokrąglania podczas zmiany rozmiaru i posiadające te dokładnego rozmiaru piksela idealny nie jest najmądrzejsza rzecz do zrobienia.

Zamiast tego, można mieć jeden div mieć absolutną szerokość, a druga posiada automatyczną szerokość tak:

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

będzie to miało przeglądarka wziąć jak najwięcej miejsca dla #right jak można ewentualnie podjąć wewnątrz div #wrap. Pamiętaj, aby ustawić szerokość zawijania, w przeciwnym razie zajmie 100% okna.

Mam nadzieję, że to pomoże!

EDITED:

prawo jest bardzo blisko do stałej szerokości, ponieważ określona szerokość kontenera już, więc jest to po prostu szerokość pojemnik odejmowana od szerokości po lewej stronie. Ma to na celu jedynie zapewnienie, że nie ma rozbieżności przy zmianie rozmiaru okna.

Rozumiem, że nie zajmie całego obszaru przestrzeni, jednak jako zawartość zostanie dodana, maksymalna będzie iść to kontener - lewa szerokość. Czy próbujesz zastosować tło? W takim przypadku ustaw tło po prawej stronie jako tło pojemnika, a następnie po lewej stronie jako tło po lewej stronie (upewnij się, że obejmuje połowę z nich).

Mam nadzieję, że pomogłem.

Źródło

2009-08-13 19:44:48

Rozszerzyłem moje pytanie o demo. Pływak prawy i lewy nie pomoże. Zmniejszenie szerokości kolumn pomaga, ale czy jest to tylko jedna dostępna opcja? –

Zaktualizowałem mój przykład powyżej. –

#right {width: auto;} pomaga przy pakowaniu, ale nie powoduje to, że #right stała szerokość. Jeśli #right nie ma wystarczającej ilości treści, będzie miało mniej niż 478 pikseli; –

Problem jest spowodowany szerokością #wrap.

Ustawiłem szerokość na 100% i nie przestaje działać w Firefoksie podczas pomniejszania za pomocą CTRL -.

Źródło

2009-08-13 21:09:55 ChrisBenyamin

Tak, ale jeśli chcą ustawić szerokość do 960px z jakiegoś powodu (np. Użyć systemu siatki 960.gs) lub jeśli chcą wyśrodkować zawartość, będą musieli ustawić szerokość dla kontenera. –

Dmitri,

Gdy przeglądarka caluclates nową szerokość swojego div Po powiększeniu, nie ma zmniejszyć dwa 478px + 4PX elementów granicznych w stosunku do pojedynczego 960px.Więc skończyć z tym:

oryginalnego style:

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

Wszystko pasuje.

zoom zmniejszona (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)

treści są zbyt szerokie dla #wrap. Aby zobaczyć pomiar &, po prostu zastosuj kolor tła do #wrap.

Aby naprawić, usuń szerokość z #wrap. Ponieważ jest pływający, będzie dopasowywał się do zawartości. Powinieneś jednak zastosować szerokość do elementów pływających, a div {float: left} stosuje ją do #wrap.

Usuń styl div {float: left} i dodaj float: left to #left, #right.

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

Jeśli chcesz #wrap się koncentrować, a następnie trzeba będzie zadeklarować szerokości do niego ponownie i dodać margin: 0 auto ;, w którym to przypadku będziesz miał tego problemu ponownie [edit: albo możesz, jak wskazuje chris, ustawić szerokość na 100%]. Po prostu przelicz ponownie szerokość #left, #right, aby pasowały.

Rozumiem, że pozostawienie małego pokoju oddechowego między szerokością elementów nadrzędnych i potomnych jest dobre, aby i tak uniknąć tego problemu.

Źródło

2009-08-13 21:13:15

spróbuj przełączyć się do innego box model następująco:

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

Źródło

2009-08-13 21:20:29

To rozwiązało mój problem. Użyłem miksu Compass: http://compass-style.org/reference/compass/css3/box_sizing/ – jedmao

Czy ktoś może wyjaśnić, dlaczego tak się dzieje? Miałem ten sam problem na mojej stronie, [Goodwill Fire 18] (http://www.goodwillfire18.com/). Zarówno "News Feed", jak i prawy pasek boczny są płynące w lewo i prawo. Prawy pasek boczny ma granicę, podobną do PO. Po pomniejszeniu w Firefoksie umieszcza prawy pasek boczny na dole. – Kayla

I napotkał ten sam problem opisany powyżej. Po beznadziejnej wędrówce po Internecie przez kilka minut dowiedziałem się, że to jest błąd w Firefox 3.5.x i IE 7/8. Błąd jest nadal obecny w chwili pisania tego tekstu.

Aby dowiedzieć się więcej na temat błędu przejdź tutaj: http://markasunread.com/?p=61 (dawniej http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/)

Źródło

2010-03-25 12:20:45 detj

Błąd nadal istnieje w przeglądarce Firefox 29.0.1 – Kayla

byłem zmagają się z tego błędu zbyt. Miałem nawigację po tabulkach ze stałymi szerokościami na każdej karcie i prawy margines na całej szerokości div kontenera.

Właściwie to odkryłem nowe rozwiązanie, które wydaje się działać świetnie. Nawigacja kartą jest oczywiście zawijana w tag ul. Ustawiłem szerokość tego tagu ul o 6px większą niż div pojemnika. Na przykład, pojemnik div ma szerokość 952 pikseli, a następnie znacznik ul ma szerokość 958 pikseli. Ponieważ znaczniki li w nawigacji są unoszone w lewo i mają ustalone szerokości, nie przekroczą 952 pikseli, jednak element ul ma pewną salę oddechową, która wydaje się konieczna do zgniecenia tego błędu. Próbowałem pomniejszyć w Firefoksie i IE7/8 i karty pozostają w miejscu.

Mam nadzieję, że to pomoże komuś zaoszczędzić kilka minut/godzin!

Źródło

2010-11-24 03:36:48 dfw

Miałem podobny problem. Ustawienie #right na ujemny margines zadziałało. Na przykład:

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

Źródło

2011-03-23 12:32:48 stiopa

Ok chłopaki, kiedy masz div o stałej wysokości, aby zapobiec pękaniu zoom wszystko, aby dodać overflow:hidden to css. To mi się udało, a teraz każda przeglądarka może oszalać.:)

Źródło

2011-12-15 20:01:01

Najlepszym rozwiązaniem do rozwiązania pływającego błędu w każdym przypadku jest użycie układu tabeli za pomocą tds. To nigdy nie straci płynności.

Źródło

2014-05-28 10:13:23

Jak zapobiec zawijaniu się układu podczas zmniejszania zoomu firefoxa

Odpowiedz

Powiązane problemy