0
HTML文件是HTML：DIV搞砸
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Patients Detailed Information Page</title>
<link href="test.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div id="detailed_fistpart">
<div id="detailed_div_image">
</div>
<div id="detailed_div_basicinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Basic Info</strong></div>
<div>
<table id="detailed_table_basicinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Name</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Gender</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Birthday</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div id="detailed_div_contactinfo">
<div class="detailed_div_inner">
<div class="detailed_div_captain"><strong>Contact Info</strong></div>
<div>
<table id="detailed_table_contactinfo">
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Phone</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td class="detailed_table_td"><font color="#9c9a9c">Email</font></td>
<td class="detailed_table_td"></td>
</tr>
<tr>
<td><font color="#9c9a9c">Address</font></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="detailed_div_reminding">
<textarea id="detailed_reminding"></textarea>
<input type="button" class="button" value="update"></input>
</div>
</div>
</body>
</html>
，这是我的CSS文件：
body{
margin:0;
padding:0;
}
#container{
width:900px;
margin:0 auto;
text-align:left;
position:relative;
filter:alpha(opacity=100);
opacity: 1.0;
}
#detailed_fistpart {
margin-top: 10px;
}
#detailed_image {
width: 200px;
height: 200px;
}
#detailed_div_basicinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
.detailed_div_inner {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.detailed_div_captain {
font-size: 20px;
height: 40px;
}
#detailed_table_basicinfo {
width: 193px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
.detailed_table_td {
border-bottom: 1px solid #efefef;
}
#detailed_div_contactinfo {
margin-left: 10px;
float: left;
background-color: #FFF;
border: 1px solid #c6cfde;
border-radius:7px;
}
#detailed_table_contactinfo {
width: 400px;
height: 118px;
font-family:"Times New Roman", Times, serif;
font-size:14px;
}
#detailed_div_reminding {
width: 900px;
}
#detailed_reminding {
width: 700px;
height: 70px;
}
.button {
background-color: #004584;
font-size:16px;
color: #FFF;
font-weight: bold;
}
当我使用firebug（扩展名），我可以看到，它是包含id = detailed_div_basicinfo的div和包含id = detailed_div_contactinfo的div，而不是包含id = detailed_fistpart的div。
的一个问题是，如果你添加magin-top: 20px到#detailed_div_reminding，它不产生边缘具#detailed_fistpart
为什么？
这是什么问题？它出什么问题了？ – 1337holiday
@ 1337holiday你可以看到使用萤火虫的问题。如果你在div＃detailed_div_reminding中加上'margin-top：20px'，这个问题就会出现。这不是预期的 – Cacheing
为什么你有一个XML声明？ – Blender