图像分辨率的 CSS 尺寸正确，但无法在浏览器中正确显示

Question

我有一个网页布局设置，并且尺寸为 1920x1200 屏幕分辨率。

正确的页面显示设计如下：

http://cl.ly/3Q0I2R0q0q1E3v230k3w

不幸的是，渲染似乎看起来更像这样（在每个浏览器中，不仅仅是 IE，通过网络表达式超级预览查看图像）： http://cl.ly/0Z2K3s3Q462s163v0303

以下是 div 标签的 CSS：

#gsquare
{
    width: 1366px;
    height: 927px;
    position: absolute;
    top: 14%;
    left: 15%;
    background-image: url("../images/1920x1200/gradientsquare.png");
    background-repeat: no-repeat;

    z-index: 15;
}

#wsquare
{
    width: 1326px;
    height: 900px;
    position: absolute;
    top: 1.5%;
    left: 1.5%;
    background-image: url("../images/1920x1200/whitesquare.png");
    background-repeat: no-repeat;
}

顶部和底部渐变背景每个像素高度为 171px。中心渐变方块设置为 1366x927，白色方块设置为 1326x900，依此类推。从我所看到的来看，这些数字确实在数学上相加，所以我不明白这里发生了什么。另外，我无法在该网站上使用 CSS3，因为 CSS3 中的大多数选择器仍处于 WD 状态。这是不允许的。

任何有关此问题的建议将不胜感激。请用代码详细说明您的解释，因为视觉辅助工具在这些情况下非常有帮助。

Answer 1

我看了你的两张图片，看来你只需稍微改变一下位置就能得到想要的结果。如果没有可查看的代码（包括图像和所有支持标记），则很难确定问题是什么。

您确实意识到，

position: absolute;
top: 14%;
left: 14%;

。

position: absolute;
    top: 1.5%;
    left: 1.5%;

从顶部开始的位置与从：开始的位置不同 15% 的下降与 1.5% 的下降将产生两个不同的起点，因此您必须在计算中对此进行调整。