Html 绝对定位div
我有以下html：Html 绝对定位div,html,css,Html,Css,我有以下html： <!DOCTYPE html> <html> <head> <title>JBA</title> <style type="text/css"> body { margin:0; padding:0; } #layout {
<!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>
JBA
身体{
保证金：0；
填充：0；
}
#布局{
浮动：左；
}
#头衔{
填充：10px；
边框：1px实心#ccc；
位置：相对位置；
}
#内容{
位置：绝对位置；
顶部：26px；
左：0；
右：0；
底部：0；
边框：1px实心#ccc；
}
内容如下:
我需要的是将#content div定位在#title标签的正下方。但是，不应更改浮动和位置设置。那么，如何计算内容的顶部呢？26px似乎适用于Chrome，但对于IE，它需要28px。为什么？给出相对于“#布局”div的位置
我已经在铬和IE9中进行了测试。对于两个位置，top:28工作正常。屏幕截图附在附件中。您希望看到这样的情况吗 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;
}
您应该将内容的padding和margin设置为0，因为浏览器呈现方式不同（即使未设置）
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;
}