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

Ответ 1

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

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

Ответ 2

Дмитрий,

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

Вы должны плавать те 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 очень близок к вашей фиксированной ширине, потому что вы уже определили ширину вашего контейнера, поэтому просто ширина контейнера вычитается по ширине левой стороны. Это просто для того, чтобы не было расхождений при изменении размера окна.

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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