Масштабирование в Firefox приводит к нарушению макета страницы

У меня проблемы с этой страницей: http://seatgeek.com/atlanta-hawks-tickets/ . Если вы уменьшите масштаб на один уровень по сравнению с «нормальной» настройкой в ​​Firefox, страница будет выглядеть так: Пример неработающего изображения . Это происходит как с версиями 3.6, так и с 4.0 FF. Этого не происходит с Webkit.

Ясно, что проблема заключается в элементах в div "list_details". Проблему можно решить, уменьшив ширину диапазонов «col1» или «col2» на 1 пиксель или увеличив элемент «vevent» li на 1 пиксель, но эти исправления приводят к неправильному отображению дизайна.

Если вы суммируете ширину «col1» и «col2», принимая также во внимание их горизонтальные отступы и границы, общая ширина составит 647 пикселей. Но он правильно отображается в Firefox (при уменьшении масштаба на один уровень), когда элемент «vevent», содержащий два элемента, имеет ширину 648 пикселей. Почему это?


html layout css firefox
person Jack7890    schedule 03.04.2011    source источник
comment
Я должен был добавить одну вещь: я пытался проверить разметку, и, хотя она не проходит полностью, большинство ошибок — это предупреждения JS, которые здесь не кажутся уместными.   -  person Jack7890    schedule 03.04.2011
comment
Я только что взглянул на него в FF 3.6.17, и макет остается идеальным, когда я увеличиваю или уменьшаю масштаб. Вы нашли решение?   -  person Steph    schedule 11.05.2011
comment
То же. Смотрел в 3.6 и 4 и не заметил проблемы при зуммировании.   -  person Bart    schedule 11.05.2011
comment
это, безусловно, выглядит нормально на моем FF 3.6.17 и 4 (Windows). Что это был за Firefox? Мак, винда, линукс?   -  person tradyblix    schedule 14.05.2011
comment
Я только что увеличил масштаб с помощью FF 10, и это работает!   -  person desbest    schedule 05.06.2012

Ответы (4)


arrow_upward
2
arrow_downward

поскольку это, похоже, было изменено, но исходный код недоступен, я могу сказать, что разница была бы вызвана округлением (или субпикселями), ОП сказал, что проблема не возникала, когда div был шириной 648px. , четное число можно разделить пополам или разделить на 2 столбца (OP также упоминает 2 столбца) довольно легко, независимо от уровня масштабирования.

Однако нечетное число647px будет обрабатываться Firefox по-разному.

Я не могу точно сказать, как, поскольку я больше не вижу ширину двух столбцов, но это сообщение в блоге Джона Резига может объяснить лучше

Проблемы с субпикселями в CSS

одно из возможных решений или, по крайней мере, помощника, состоит в том, чтобы убедиться, что доступная ширина контейнера всегда делится на количество столбцов?

person clairesuzy    schedule 09.05.2011

arrow_upward
1
arrow_downward

удаление margin-right из следующего css устранило проблему уменьшения масштаба

#left_container .search_details .list_details {
    margin-right: 1px;
}
person MikeM    schedule 03.04.2011
comment
Это действительно предотвращает его полное разрушение, но также слегка меняет внешний вид правого края списка. Вместо четкого края (cl.ly/5hel) он имеет слегка размытое (cl.ly/5hBg). Я понимаю, что это очень незначительное отличие, но я предпочитаю нечеткую версию. - person Jack7890; 03.04.2011

arrow_upward
1
arrow_downward

Добавьте margin-right:-1px в следующий css. Это может решить проблему с уменьшением масштаба.

.team-show .static-sidebar {
    line-height: 22px;
    margin-right: -1px;
    position: relative;
    width: 255px;
}
person windyao    schedule 05.06.2012

arrow_upward
1
arrow_downward

Для справки в будущем тем, кто ищет общий ответ на вопрос, почему масштабирование может привести к разрыву макета.

http://dev.jeffersonscher.com/resolution.html

Также используйте относительные единицы для определения размеров объектов.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

person Will    schedule 07.11.2019