我正在开发一个新网站，希望它能够完美地兼容IE6+、Firefox、Chrome、Opera和Safari浏览器。
我已经让它与所有这些浏览器兼容了，但是有一个问题我处理不了——当缩放时，所有的布局都变得混乱。
这是一个带有问题的示例fiddle： http://jsfiddle.net/pdQrQ/1/
在Chrome（14.0.835）、Firefox（7.0.1）和IE9中，缩小页面时，右上角的框的大小会改变（至少看起来是这样），然后它就不能与下面的框右对齐。
编辑：
我知道原因了——边框！
解释：每个浏览器的缩放功能会改变div元素的宽度/高度，但不会改变边框的大小，因此会导致此故障/浮动。 如果我删除边框，一切都很完美。
但是我想使用边框，否则我的设计将变得更加丑陋。
我该怎么修复呢？
谢谢！
我的最佳猜测是这是由于缩小比例时的四舍五入误差导致的。例如，如果你想象一个宽度为250px的盒子，其中包含两个宽度为125px的并排放置的盒子。显然，它们可以并排放置。如果你缩小到一半大小，则外部盒子将为125px，内部盒子将为62.5px，每个盒子都会四舍五入为63px（半像素是你能得到的最小值）。这两个盒子现在总宽度为126px，因此不能并排放置，一个必须放在另一个下面。
我认为这基本上就是你在这里工作的原理。我认为最好的解决方案是使两个并排放置的盒子变窄，并将一个向右漂移，以使右边框不被打断。这可能意味着中间有些微小的间隙，但希望这个间隙可以吸收你缩小时的四舍五入误差。
编辑：
正如你所说，边框是造成困惑的主要原因。它们可以从外部容器中取出，并放在一个专门设计用来添加边框的嵌套容器中。
http://jsfiddle.net/chrisvenus/pdQrQ/6/
上面是一个Fiddle（基于你的），它创建了包含边框的内部DIV标签，而浮动容器则根本没有边框。这似乎足够强大，可以在IE8、FF7.0.1或Chrome 14.0.835.202中工作。
所做的更改是将div添加到HTML中，并在它和其父级之间交换一些类。有一个新的innercontainer类，将高度和宽度设置为100%，以确保它填充包含盒子（因此边框位于所需位置）。此外，我更改了底部盒子的宽度，使其正确对齐。
如果这对你有用，请告诉我。
现在最好的做法是 "box-sizing:border-box"。
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }