XHTML DOCTYPE声明下设置绝对位置对象的单位问题-优快云博客

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 5     <title>添加了XHTML DOCTYPE声明时设置绝对位置对象需要加单位</title>
 6   </head>
 7   <body>
 8   
 9   <div id="dv1" style="border:solid 1px black;width:200px;height:200px;top:200;left:200;position:absolute;"></div>
10   
11   <div id="dv2" style="border:solid 1px black;width:200px;height:200px;top:200px;left:200px;position:absolute;"></div>
12   </body>
13 </html>

在Firefox，IE下，如果添加了DOCTYPE，XHTML声明，则要设置display为absolute，绝对位置的对象时，需要加上单位，如px，要不没有效果。

运行例子，发现两个绝对位置的div位置并没有重合，第一个按照正常流的位置布局，而第二个div则按照指定的left和top值来显示。

　　如果去掉XHTML DOCTYPE申明，则两个div都能按照指定的left，top值来显示，如下

View Code

 1 <html>
 2   <head>
 3     <meta http-equiv="content-type" content="text/html;charset=gb2312" />
 4     <title>添加了XHTML DOCTYPE声明时设置绝对位置对象需要加单位</title>
 5   </head>
 6   <body>
 7   
 8   <div id="dv1" style="border:solid 1px black;width:200px;height:200px;top:200;left:200;position:absolute;"></div>
 9   
10   <div id="dv2" style="border:solid 1px black;width:200px;height:200px;top:200px;left:200px;position:absolute;"></div>
11   </body>
12 </html>