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

【问题标题】：Image is Correct CSS dimensions for Resolution but won't display properly in browsers图片是正确的分辨率 CSS 尺寸，但无法在浏览器中正确显示
【发布时间】：2011-09-28 10:21:58
【问题描述】：

我有一个网页布局设置，我为尺寸 1920x1200 的屏幕分辨率进行了设置。

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

http://cl.ly/3Q0I2R0q0q1E3v230k3w

不幸的是，渲染看起来更像这样（在每个浏览器中，不仅仅是 IE，通过 web 表达式超级预览查看的图像）： 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;
}

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

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

【问题讨论】：

标签： html css image cross-browser scaling

【解决方案1】：

我查看了您的两张图片，您似乎只需稍微更改定位即可获得所需的结果。但是，如果没有要查看的代码（包括图像和所有支持标记），很难确定问题出在哪里。

您确实意识到，从以下开始：

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

对

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

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

【讨论】：