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%和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;
                        }