Как предотвратить перенос плавающего макета при уменьшении масштабирования firefox

17

Учитывая следующий HTML. Он отображает два столбца: #left , #right . Оба имеют фиксированную ширину и имеют 1px границы. Ширина и границы равны размеру верхнего контейнера: #wrap .

Когда я уменьшаю размер Firefox 3.5.2, нажимая Ctrl + - столбцы обернуты ( демо ).

Как предотвратить это?

<!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>
    
задан Dmitri Zhuchkov 13.08.2009 в 21:40
источник

9 ответов

13

Попробуйте переключиться на другую модель окна следующим образом:

#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
}
    
ответ дан ЯegDwight 13.08.2009 в 23:20
  • Это решило мою проблему. Я использовал Compass mix-in: compass-style.org/reference/compass/css3/box_sizing –  jedmao 09.04.2013 в 23:17
  • Может ли кто-нибудь объяснить, почему это происходит? У меня была такая же проблема на моем сайте, Goodwill Fire 18. И «Лента новостей», и правая боковая панель плавают влево и вправо. На правой боковой панели есть граница, похожая на OP. Когда вы уменьшаете масштаб в Firefox, он помещает правую боковую панель внизу. –  Kayla 16.05.2014 в 22:25
8

Дмитрий,

Когда браузер масштабирует новую ширину ваших divs после увеличения, он не уменьшает два элемента границы 478px + 4px пропорционально одному 960px. Итак, вы закончите с этим:

Оригинальные стили:

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

Все прекрасно вписывается.

Уменьшен снизу (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)

Содержимое слишком велико для #wrap. Чтобы увидеть & amp; измерьте это, просто примените цвет фона к #wrap.

Чтобы исправить, удалите ширину из #wrap. Поскольку он плавает, он будет бликов к содержимому. Однако вы должны применять ширину к плавающим элементам, а ваш div {float: left} применяет ее к #wrap.

Удалите стиль div {float: left} и добавьте float: left to #left, #right.

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

Если вы хотите, чтобы #wrap была центрирована, вам нужно снова объявить ширину и добавить margin: 0 auto ;, и в этом случае у вас снова будет эта проблема. [edit: или вы можете, как chris, установите ширину до 100%]. Так просто пересчитайте ширину #left, #right так, чтобы они поместились.

Я понимаю, что оставлять небольшую передышку между шириной родительского и дочернего элементов является хорошим, чтобы избежать такой проблемы в любом случае.

    
ответ дан aaron b11 13.08.2009 в 23:13
2

У меня была аналогичная проблема. Устанавливается #right с отрицательным отступлением. Например:

#right{
    margin-right:-400px;
}
    
ответ дан stiopa 23.03.2011 в 13:32
2

Я столкнулся с той же проблемой, о которой говорилось выше. После того, как я безнадежно бродил по интернету в течение нескольких минут, я узнал, что, по-видимому, это ошибка в Firefox 3.5.x и IE 7/8 . Баг все еще присутствует на момент написания этой статьи.

Подробнее об ошибке см. здесь: Ссылка (ранее Ссылка )

    
ответ дан detj 25.03.2010 в 13:20
  • Ошибка в Firefox 29.0.1 –  Kayla 16.05.2014 в 22:27
1

Я не уверен, что полностью понимаю вашу ситуацию. Уменьшение масштаба должно привести к уменьшению масштаба. Вы говорите, что когда вы уменьшаете масштаб вокруг столбцов?

Вы должны плавать те divs, используя этот код в вашем CSS:

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

Если это не сработает, вы можете попытаться оставить небольшое пространство между столбцами, отрегулировав ширину, чтобы компенсировать некоторые небольшие несоответствия браузеров.

EDITED (игнорировать выше):

Увидев, как вы предоставили мне больше информации, я должен сказать вам, что браузер включает округление при изменении размера и отсутствие точного размера пикселя не самое умное.

Вместо этого вы можете иметь один div с абсолютной шириной, а другой - с автоматической шириной:

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

В этом случае браузер будет занимать столько места для #right, сколько может быть сделан внутри div #wrap. Обязательно установите ширину для обертки, иначе это займет 100% окна.

Надеюсь, это поможет!

<б> отредактированы :

Right IS очень близок к вашей фиксированной ширине, потому что вы уже определили ширину вашего контейнера, поэтому просто ширина контейнера вычитается по ширине левой стороны. Это просто для того, чтобы не было расхождений при изменении размера окна.

Я понимаю, что он не займет всю область пространства, однако, по мере добавления контента, максимальная скорость будет равна ширине контейнера. Вы пытаетесь применить фон? В этом случае установите фон правой стороны в качестве фона контейнера, а затем левую сторону в качестве фона левой стороны (убедитесь, что он закрывает половину).

Надеюсь, я помог.

    
ответ дан Brandon Wang 13.08.2009 в 21:44
  • Я расширил свой вопрос демо. Правый и левый поплавки не помогут. Уменьшение ширины столбцов помогает, но это только один доступный вариант? –  Dmitri Zhuchkov 13.08.2009 в 22:07
  • Я обновил свой пример выше. –  Brandon Wang 14.08.2009 в 04:18
  • #right {width: auto;} помогает с упаковкой, но это не делает фиксированную ширину #right. Если #right не хватает содержимого, то он будет меньше 478 пикселей; –  Dmitri Zhuchkov 17.08.2009 в 12:52
  • Я обновил свой пример выше. –  Brandon Wang 19.08.2009 в 19:14
1

Я тоже боролся с этой ошибкой. У меня была табуляция с фиксированной шириной на каждой вкладке и правым краем, суммарно шириной контейнера div.

Я действительно обнаружил новое решение, которое, похоже, отлично работает. Навигация на вкладке, конечно же, завернут в тег ul. Я установил ширину этого тега ul примерно на 6px больше, чем контейнер div. Так, например, контейнер div имеет ширину 952px, тогда тег ul имеет ширину 958px. Поскольку теги li в навигации плавают влево и имеют фиксированную ширину, они не будут выходить за пределы 952px, однако элемент ul имеет некоторую комнату для передышки, которая, по-видимому, необходима для сквоша этой ошибки. Я пробовал масштабирование в Firefox и IE7 / 8, и вкладки остаются на месте.

Надеюсь, это поможет кому-то сэкономить несколько минут / часов!

    
ответ дан dfw 24.11.2010 в 04:36
1

Хорошо, ребята, когда у вас есть div с фиксированной высотой, чтобы предотвратить масштабирование от разрыва всего, добавьте overflow:hidden в его css. Это сделало трюк для меня, и теперь каждый браузер может сходить с ума. :)     

ответ дан Ed Peixoto 15.12.2011 в 21:01
0

Проблема вызвана шириной вашего #wrap.

Я установил ширину на 100%, и она больше не сломается в Firefox при масштабировании с помощью CTRL -.

    
ответ дан ChrisBenyamin 13.08.2009 в 23:09
  • Да, но если они хотят установить ширину до 960 пикселей по какой-либо причине (скажем, для использования сетки 960.gs) или если они хотели бы сосредоточить содержимое, им нужно будет установить ширину для контейнер. –  Brandon Wang 14.08.2009 в 04:20
0

Лучшим решением для исправления плавающей ошибки в каждом случае является использование табличного макета с использованием tds. Это никогда не потеряет плавание.

    
ответ дан Balram Singh 28.05.2014 в 12:13