Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/redis/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 绝对定位不适用于XHTML?_Css_Xhtml_Html - Fatal编程技术网

Css 绝对定位不适用于XHTML?

Css 绝对定位不适用于XHTML?,css,xhtml,html,Css,Xhtml,Html,我试图用绝对定位来定位一个DIV,但是使用XHTML 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">


我试图用绝对定位来定位一个DIV,但是使用XHTML 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">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" media="screen,projection" />
<style type="text/css">

body { background-color: silver; }
div
{
width: 100px;
height: 100px;
border: 1px solid #000;
}
div#one
{
background-color: red;
position: absolute;
top:520;
left: 220; }

</style>
</head>
<body>

<h1>
This is some text this is some text this is some.
</h1>
<div id="one"></div>

</body>
</html> 

测试
正文{背景色:银色;}
div
{
宽度:100px;
高度:100px;
边框:1px实心#000;
}
第一分区
{
背景色:红色;
位置:绝对位置;
排名:520;
左:220;}
这是一些文本这是一些文本这是一些。
如果将DOCTYPE替换为以下内容,则显示:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

它将正常工作,但我希望遵循XHTML doctype。

有什么想法吗?

px
添加到您的
top
left
属性中:

top: 520px;
left: 220px

使用XHTML doctype(或者更准确地说:),浏览器不会假设您的意思是
px
,如果您没有明确声明它,与Quirks模式不同。

在XHTML中,没有内容的绝对定位元素变得“不可见”,因为它们的宽度为0,高度为0。尝试将内容添加到div#one或尝试以下CSS

div#one
{
background-color: red;
position: absolute;
top:520px;
left: 220px; 
height: 100px;
width: 100px;
}

很好,这可能就是原因。我的答案似乎是明智之举,但你的答案可能是问题的真正原因。值得指出的是,这并不是因为Doctype上写着“XHTML”,它只是不被认为是超越时代的遗迹(比如缺少URI的HTML 4.01 Transitional)。同样值得一提的是,使用标记和CSS验证器是一个非常好的主意(并且可以找到CSS中缺少的单元)。@David Dorward:好的观点。如果我没记错的话,这是一种怪癖模式(由旧doctype触发)将无单位测量值视为
px
值。不幸的是,你的答案是,他已经给出了
div
a
width
height
请参见:
div{width:100px;height:100px}
True,后来我意识到三十点的答案是正确的。