添加了DOCTYPE XHTML声明时设置绝对位置对象需要加单位--HTML/WML/CSS兼容/XML--编程设计网

=波波日志 > HTML/WML/CSS兼容/XML > 添加了DOCTYPE XHTML声明时设置绝对位置对象需要加单位=

添加了DOCTYPE XHTML声明时设置绝对位置对象需要加单位

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

-HTML

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

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

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

-HTML

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

　　所以为了兼容性更加好，注意都加上单位px。
　　如拖拽效果什么的，如果加了XHTML DOCTYPE声明，但是设置left和top时忘记加上单位，就不会出校效果了。

类别：HTML/WML/CSS兼容/XML　作者：波波　日期：2010-06-24　【评论：0】　

上一篇：Firefox下浮动布局时空白边叠加问题　
下一篇：样式的特性及优先级别

暂时没有评论！

发表留言

百度赞助