полностью позиционированный макет отображается пустым - PullRequest
Новая
       6

полностью позиционированный макет отображается пустым

1 голос
/ 04 марта 2010

Я работаю над сайтом и использую абсолютное позиционирование, поскольку размер области просмотра всегда будет фиксированным (автономное веб-приложение для iphone). На полпути я понял, что не использую правильное объявление типа документа и тому подобное. Когда я добавил их и обновил в браузере, содержимое полностью исчезло.

Пример кода ниже. Содержимое не имеет типа документа и простого открывающего тега html. Как показано ниже, страница отображается полностью пустой. Кто-нибудь может объяснить, почему этот код не работает в стандартном режиме (с doctype и тому подобным)? Что я могу изменить, чтобы исправить это (желательно совместимо с несколькими браузерами) - при этом используя макет с абсолютным позиционированием? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css" media="screen">
        html {
            overflow: hidden;
            height: 100%;
        }

        body {
            overflow: hidden;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
    <div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: -1; top: 0; height: 480; left: 0; width: 320; text-align: left; " class="windowWrapper">
        <div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 0; height: 480; left: 0; width: 320; text-align: left; " class="mobilePage">
            <div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 0; height: 50; left: 0; width: 320; text-align: left; " class="mobileToolbar">
                <button style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 5; width: 60; text-align: center; " class="">Back</button>
                <button style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 245; width: 70; text-align: center; " class="">Options</button>
                <p style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 65; width: 180; text-align: center; " class="mobilePageTitle">Home</p>
            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 04 марта 2010

Если после измерений высоты и ширины добавить «px», чтобы указать размер в пикселях, страница должна отображаться лучше.

например.width: 300px;

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

Вы можете использовать W3C validator для проверки веб-страниц.для корректности по отношению к стандартам, и я подозреваю, что это осветит такие проблемы.

...