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

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

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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

#left_container .search_details .list_details {
    margin-right: 1px;
}

Ответ 3

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

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