1

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

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

此外，如果您能解释其背后的 CSS 理论，那就太好了。

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

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

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

在此处输入图像描述

4

2 回答 2

2

为了允许舍入误差，取一个百分比。15%左，84%应该工作。

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

考虑首先使用两个 div15%和84%（或者85%如果它有效），然后使用这两个 div 作为包装器，在其中放置一个 div 并给出正确的边距。这样，您的利润就不会干扰width计算。

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

如有疑问，请广泛使用 Page/Web Inspector 来了解拳击模型...

于 2012-04-13T13:11:32.383 回答
1

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

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

主容器 css

      #mainContainer {

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

或者

       #leftNavContainer {

                   width:15%; //(or) reduce your margin
                   margin:5px;
                        }
于 2012-04-13T14:22:46.843 回答