完全绝对定位的布局显示为空白
我正在一个网站上工作，并且一直使用绝对定位，因为视口大小始终是固定的（离线iphone webapp）。中途我意识到我没有使用正确的文档类型声明等。当我添加这些内容并在浏览器中刷新时，内容完全消失了。
下面是代码示例。没有文档类型和简单的“”开始 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>
I'm working on a website and have been using absolute positioning, since the viewport size will always be fixed (offline iphone webapp). Halfway through I realized that I wasn't using a proper doctype declaration and such. When I added those and refreshed in a browser, the content completely vanished.
A code sample is below. With no doctype and a plain "" opening html tag, the content shows up. As it is below, the page shows up completely blank. Can anyone explain why this doesn't this code work in standards mode (with doctype and such)? What can I change to fix it (preferably cross browser compatible) - while still using an absolute positioned layout?
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
如果您在高度和宽度测量值后添加“px”来指示尺寸（以像素为单位），则页面应该显示得更好。
例如。
width: 300px;严格标准模式将更加严格地要求您正确指定这些类型的内容。
您可以使用 W3C 验证器 来验证网页是否符合标准，我怀疑它会突出显示这些类型的问题。
If you add "px" after your height and width measurements to indicate the size in pixels, the page should display better.
eg.
width: 300px;The strict standards mode will be more stringent about needing you to specify these type of things correctly.
You can use the W3C validator to validate web pages for correctness against the standards and i suspect it would highlight these kind of issues.