放大Firefox会导致页面布局中断

Question

我在使用此页面时遇到问题：http://seatgeek.com/atlanta-hawks-tickets/。如果从Firefox中的“普通”设置缩小一个级别，页面如下所示：。在版本3.6和4.0的FF中都会发生这种情况。 Webkit不会发生这种情况。

显然，问题在于“list_details”div中的元素。可以通过将“col1”或“col2”跨度减小1px或通过将“vevent”li元素增加1px来解决该问题，但是这些修复会导致设计呈现不正确。

如果将“col1”和“col2”的宽度相加，同时考虑到它们的水平填充和边框，则总宽度为647px。但它只能在Firefox中显示（缩小一级时），当包含两者的“vevent”元素的宽度为648px时。那是为什么？

Answer 1

因为这似乎已经被撞了，但是原始代码不可用，我可以说差异可能是由于舍入（或子像素）造成的，OP表示问题没有发生在div是648px宽..无论缩放级别如何，偶数都可以减半，或者在2列之间分开（OP也会提到2列）

然而，Firefox

会对奇数647px进行不同的处理

我不能确切地说我怎么也看不到两列的宽度，但John Resig撰写的这篇博文可能会更好地解释

Sub-Pixel Problems in CSS

一个可能的解决方案，或者至少是一个帮手，是为了确保容器的可用宽度总是可以被列数整除？

Answer 2

从以下css中删除margin-right修复了缩小问题

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

Answer 3

将margin-right:-1px添加到以下css中。这可以解决缩小问题。

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

Answer 4

那些寻求有关缩放为什么会导致布局中断的一般答案的人以供将来参考

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

还使用相对单位来确定大小

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