CSS：缩放更改时两列 Div 布局未对齐

Question

请参阅 jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ 。我有两列布局。它是基于 % 的布局——但定义了最小宽度。当我将（浏览器 IE8 的）缩放比例设为 75 % 或更低时，效果很好。当我将缩放设置为 85% 时，橙色框会下降。我们怎样才能克服这种错位呢？无论缩放/浏览器最小化/桌面分辨率如何，橙色框都应保持在正确的位置（如图所示）。它不应该下降。

jsFiddle 中的结果窗口：http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/

另外，如果你能解释一下它背后的 CSS 理论，那就太好了。

注意：即使在浏览器最小化时也会观察到这种错位。

注意：测试时我的桌面配置为 1024 x 768。

---

即使从 leftNavContainer 和主容器中删除边距后，问题仍然存在。请看http://jsfiddle.net/Lijo/ryDnn/10/

Answer 1

为了允许舍入误差，取一个百分比。 15% for left 和 84% 应该可以工作。

但是，问题是你也在添加边距，这显然不会很好。

考虑首先让两个 div 使用 15% 和 84%（或 85%，如果可行的话），然后使用这两个 div 作为包装器，在其中放置一个 div 并提供正确的边距。这样一来，您的边距就不会干扰width 的计算。

换句话说，边距不是 div 宽度的一部分。

如有疑问，请广泛使用 Page/Web Inspector 以了解装箱模型...

Answer 2

你的总宽度是 100% leftNavContainer 取的宽度是 25% 因为 margin-left-10px 和 width-15% ,mainContainer 也是一样的

如果您提供边距意味着减少与边距大小相关的宽度

mainContainer css

      #mainContainer {

                   width:75%; //(or) reduce your margin
                        }

或

       #leftNavContainer {

                   width:15%; //(or) reduce your margin
                   margin:5px;
                        }