Question

我正在使用网站并且一直在使用绝对定位，因为视口大小将始终固定（离线iphone webapp）。中途我意识到我没有使用正确的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>

Answer 1

如果在高度和宽度测量值之后添加“px”以指示大小（以像素为单位），页面应该显示得更好。

例如。 width: 300px;

严格的标准模式将更加严格，需要您正确指定这些类型的东西。

您可以使用W3C validator验证网页是否符合标准的正确性，我怀疑它会突出显示这类问题。

完全绝对定位的布局显示空白

1 个答案: