絕對定位的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

回答

相關問題