Question

显示div时会发生一些非常奇怪的事情。在IE中，它显示的应该是它应该的，但在Chrome中它稍微向下移动。这是IE中的样子：

enter image description here

在Chrome中：

enter image description here

你会注意到在chrome中，内容div稍微向下移动。为什么Chorme这样做？

这是我的代码：

<?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 code

?>
<a class = "main" href = "post.php">Post new topic</a>
</div>
<div class = "footer">
<p class = "footer">Copyright imulsion 2013</p>
</div>
</body>
</html>

CSS：

div.header
{
height:150px;
background-color:#008AC8;
}
div.menu
{
float:left;
width:200px;
height:800px;
background-color:#64BCE2
}
div.content
{
height:800px;
background-color:#F9F9D9;
}
div.footer
{
height:20px;
background-color:#008AC8;
}

Answer 1

我怀疑它是＆lt; p＆gt;元素，它通常具有隐式边距或填充。试试“开发者工具” - IE和Chrome都有自己的版本，并验证是否存在问题。如果是，则删除＆lt; p＆gt;标记或添加规则以删除边距和填充，并将它们设置为@Stacey Garrison建议，除了p而不是body和html。

Answer 2

我认为你需要重置css，就像Oded发布的那样。那里有很多：

我使用这个：http://necolas.github.io/normalize.css/

最简单的解决方案是试试这个：

body, html {
    margin:0;
    padding:0;
}

Answer 3

每个网络浏览器都会以不同的方式解释代码。您只需要使用代码，看看在不同场景中会发生什么。右键单击并在IE和Chrome上按“检查元素”。这将有助于您缩小问题范围。

Div在IE和Chrome中的显示方式不同

3 个答案: