Изображение соответствует правильному размеру CSS для разрешения, но не будет отображаться в браузерах - PullRequest
0 голосов
/ 05 июля 2011

У меня есть настройка для макета веб-страницы, и я сделал это для размеров экрана 1920x1200.

Правильное отображение страницы было разработано так:

http://cl.ly/3Q0I2R0q0q1E3v230k3w

К сожалению, рендеринг выглядит примерно так (в любом браузере, а не только в IE, изображение, просматриваемое через веб-выражение (супер-превью): http://cl.ly/0Z2K3s3Q462s163v0303

Вот CSS для тега div для них:

#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.Это не разрешено.

Буду признателен за любые советы по этому вопросу.Пожалуйста, уточните ваши объяснения с помощью кода, так как наглядные пособия чрезвычайно полезны в этих случаях.

1 Ответ

0 голосов
/ 05 июля 2011

Я посмотрел оба ваших изображения, и кажется, что вы можете просто немного изменить положение, чтобы получить желаемый результат.Однако, не имея необходимого кода (включая изображение и всю поддерживающую разметку), трудно сказать наверняка, в чем проблема.* против

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

отличается с точки зрения размещения сверху.Снижение на 15% против 1,5% приведет к двум различным исходным точкам, поэтому вам придется учесть это в своих расчетах.

...