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

Question

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

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

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

Answer 1

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

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

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

Субпиксельные проблемы в CSS

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

Answer 2

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

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

Answer 3

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

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