1

ビューポートのサイズは常に固定されているため（オフラインのiphone webapp）、私はWebサイトで作業しており、絶対測位を使用しています。途中で、適切なDoctype宣言などを使用していないことに気付きました。それらを追加してブラウザで更新すると、コンテンツが完全に消えてしまいました。

コードサンプルを以下に示します。Doctypeがなく、単純な ""開始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>
4

1 に答える 1

0

高さと幅の測定値の後に「px」を追加してサイズをピクセル単位で示すと、ページの表示が良くなります。

例えば。width: 300px;

厳格な標準モードでは、これらのタイプのものを正しく指定する必要があることについて、より厳格になります。

W3Cバリデーターを使用して、Webページが標準に照らして正しいかどうかを検証できます。これにより、この種の問題が浮き彫りになると思います。

于 2010-03-04T11:35:29.160 に答える