Question

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

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

不幸的是，渲染看起来更像是这样（在每个浏览器中，不只是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状态。这是不允许的。

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

Answer 1

我查看了你的两张照片，看起来你可以简单地改变定位，以获得理想的效果。虽然没有查看代码（包括图像和所有支持标记），但很难确定问题是什么。

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

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

与

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

在顶部的位置方面有所不同。下降15％而下降1.5％将产生两个不同的起点，因此您必须在计算中对其进行调整。

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

1 个答案: