绝对定位的div

我有以下的html：绝对定位的div

<!DOCTYPE html> 
<html> 
    <head> 
     <title>JBA</title> 
     <style type="text/css"> 
      body { 
       margin:0; 
       padding:0; 
      } 
      #layout { 
       float: left; 
      } 
      #title { 
       padding: 10px; 
       border: 1px solid #ccc; 
       position: relative; 
      } 
      #content { 
       position: absolute; 
       top: 26px; 
       left: 0; 
       right: 0; 
       bottom: 0; 
       border: 1px solid #ccc; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="layout"> 
      <label id="title">Below is content:</label> 
      <div id="content"> 
      </div> 
     </div> 
    </body> 
    <script> 
    </script> 
</html>

我需要的是定位＃内容格设置正下方#title标签。但是，浮动和位置设置不应该改变。那么，如何计算＃内容的顶部？ 26px似乎适用于Chrome，但对于IE，它需要为28px。为什么？

来源

2013-05-31 synergetic

得到相对于我在铬测试它以及IE9的 “#layout” DIV

#layout { 
    float: left; 
    position:relative; 
}

来源

2013-05-31 05:27:49

位置。对于两个位置顶部：28正常工作。截图附上。 enter image description here

来源

2013-05-31 05:35:10

你期待的东西就像在你的CSS这个LINK

一些变化：

 body { 
       margin:0; 
       padding:0; 
      } 
      #layout { 
       float: left; 
      } 
    #title { 
       padding: 5px; 
       border: 1px solid #ccc; 
       float:left; 
      } 
    #content { 
       clear:both; 
       width:400px; 
       height:400px; 
       border: 1px solid #ccc; 
      }

来源

2013-05-31 05:50:54 Aravind30790

您应该＃内容设置填充和边距为0，因为浏览器渲染这个不同（尽管it'没有设置）。

来源

2013-05-31 07:23:51 user2239256

绝对定位的div

回答

相关问题