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;200px;height:200px;top:200;left:200;position:absolute;"></div> 10 11 <div id="dv2" style="border:solid 1px black;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;200px;height:200px;top:200;left:200;position:absolute;"></div> 9 10 <div id="dv2" style="border:solid 1px black;200px;height:200px;top:200px;left:200px;position:absolute;"></div> 11 </body> 12 </html>
两者的显示区别很明显，当不加<!DOCTYPE>声明时，浏览器按照Quirks Mode来渲染。
所以为了兼容性更加好，注意都加上单位px。
如拖拽效果什么的，如果加了XHTML DOCTYPE声明，但是设置left和top时忘记加上单位，就不会出校效果了。
至于加不加单位，根本在于是否按照W3C标准来进行。即用<!DOCTYPE>的情况下就要用px单位，因为它是按照标准来解析文档的。否则是按照Quirks Mode，可以不加px。