0

我有以下html：

<!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>

我需要的是将#content div 放置在#title 标签的正下方。但是，不应更改浮动和位置设置。那么，如何计算#content 的顶部？26px 似乎适用于 Chrome，但对于 IE，它需要为 28px。为什么？

4

4 回答 4

0

给出相对于“#layout” div 的位置

#layout {
  float: left;
  position:relative;
}
于 2013-05-31T05:27:49.027 回答
0

您应该在 #content 上将 padding 和 margin 设置为 0，因为浏览器会以不同的方式呈现它（即使它没有设置）。

于 2013-05-31T07:23:51.103 回答
0

你期待这样的链接吗

您的 CSS 中的一些更改：

       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-31T05:50:54.280 回答
0

我已经在铬以及 IE9 中对其进行了测试。对于两个位置 top: 28 工作正常。附上截图。在此处输入图像描述

于 2013-05-31T05:35:10.993 回答