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

Дмитрий,

Когда браузер вычисляет новую ширину ваших div после увеличения , он не уменьшает два 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. Чтобы увидеть и измерить это, просто примените цвет фона к #wrap.

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

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

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

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

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

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

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

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

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

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

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

ИЗМЕНИТЬ (игнорировать выше):

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

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

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

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

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

ИЗМЕНИТЬ :

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

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

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

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

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

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

Чтобы узнать больше об ошибке, перейдите сюда: http://markasunread.com/?p=61 (ранее http://markasunread.com/2009/06/zoom-bug -in-ie78-and-firefox-created-by-border / )