Question

我的网页上有四个div;标题，菜单，内容和页脚。在IE中，所有内容都显示正确嵌套，但在Chrome中，页脚与菜单和内容div之间存在小差距。我试过把

margin:0;
padding:0;

关于一切，但没有变化。以下是我的问题的一些图片：

在Chrome中（显示不正确）：

enter image description here

在IE中（正确显示）：

enter image description here

为什么会这样？这是我的HTML：

<?php include "headermysql.php"?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<script type = "text/javascript">
function to_login_page()
{
window.location.assign("http://127.0.0.1/sxp/login.php");
}
function to_signup_page()
{
window.location.assign("http://127.0.0.1/sxp/signup.php");
}
</script>
<link rel = "stylesheet" type = "text/css" href = "textstyles.css">
</head>
<body>
<?php include "headerhtml.php";?>
<div class = "menu">
<p>menu</p>
</div>
<div class = "content">
<?php
//irrelevant PHP 
?>
<a class = "main" href = "post.php">Post new topic</a>
</div>
<div class = "footer">
<p class = "footer">Copyright Stafford King 2013</p>
</div>
</body>
</html>

这是我的CSS：

.error
{
font-weight:bold;
font-family:Courier New;
color:red;
text-align:left;
font-size:20px;
margin:0;
padding:0;
}
.main
{
font-family:Courier New;
font-size:15px;
text-align:left;
color:black;
margin:0;
padding:0;
}
a.main
{
font-family:Courier New;
font-size:15px;
text-align:left;
color:#000066;
margin:0;
padding:0;
}
a.searchresult
{
font-family:Courier New;
font-size:15px;
text-align:center;
color:#000066;
margin:0;
padding:0;
}
p.footer
{
text-align:center;
font-family:Courier New;
font-size:15px;
color:#000000;
}
div.header
{
height:150px;
background-color:#008AC8;
margin:0;
padding:0;
}
div.menu
{
float:left;
width:200px;
height:800px;
background-color:#64BCE2;
margin:0;
padding:0;
}
div.content
{
height:800px;
background-color:#F9F9D9;
margin:0;
padding:0;
}
div.footer
{
height:20px;
background-color:#008AC8;
margin:0;
padding:0;
}
h2.main
{
font-family:Cambria;
font-size:35px;
color:black;
text-align:center;
margin:0;
padding:0;
}
.searchresult
{
font-family:Courier New;
font-size:15px;
text-align:center;
color:black;
margin:0;
padding:0;
}
body{margin:0;}

对不起，很长的帖子。感谢所有帮助。

Answer 1

页脚中的<p>部分可能存在问题，因为页脚高度为20px，内部字体为15px，但我认为<p>默认有一些边距 - 顶部和底部。你应该把它设置为0px;

p.footer
{
text-align:center;
font-family:Courier New;
font-size:15px;
color:#000000;
margin:0px;
}

Answer 2

你只需要在你的css文件中添加以下css。

*{padding:0; margin:0;}

Answer 3

当我执行你的样本时，它在Internet Explorer中也是错误的。您可以通过添加

来解决问题

显示：内联;

到p.footer部分

Answer 4

字体似乎总是会导致此问题，但我确定如果您设置此字体，它会照顾它

line-height: 0px;

即使有保证金，Div也有保证金：0和填充：0;

4 个答案: