Css 完全绝对定位布局显示为空白
我在一个网站上工作,一直使用绝对定位,因为视口大小总是固定的(离线iphone webapp)。中途我意识到我没有使用正确的doctype声明等等。当我添加这些内容并在浏览器中刷新时,内容完全消失了 下面是一个代码示例。没有doctype和一个简单的“打开”html标记,内容就会显示出来。如下图所示,页面显示为完全空白。有人能解释一下为什么这段代码不能在标准模式下工作(使用doctype等)?在仍然使用绝对定位布局的情况下,我可以更改什么来修复它(最好是跨浏览器兼容)Css 完全绝对定位布局显示为空白,css,css-position,Css,Css Position,我在一个网站上工作,一直使用绝对定位,因为视口大小总是固定的(离线iphone webapp)。中途我意识到我没有使用正确的doctype声明等等。当我添加这些内容并在浏览器中刷新时,内容完全消失了 下面是一个代码示例。没有doctype和一个简单的“打开”html标记,内容就会显示出来。如下图所示,页面显示为完全空白。有人能解释一下为什么这段代码不能在标准模式下工作(使用doctype等)?在仍然使用绝对定位布局的情况下,我可以更改什么来修复它(最好是跨浏览器兼容) <!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>
html{
溢出:隐藏;
身高:100%;
}
身体{
溢出:隐藏;
填充:0;
保证金:0;
宽度:100%;
身高:100%;
}
返回
选择权
主页
如果在高度和宽度测量值后添加“px”以指示像素大小,页面显示效果会更好
例如,宽度:300px代码>
严格标准模式将更严格地要求您正确指定这些类型的内容
您可以使用验证网页是否符合标准,我怀疑它会突出这些问题。谢谢!!!!!那很有魅力!我看了一些其他的例子,只是不知道我在做什么,这是不同的。我将来会记得验证器。。。