1

显示 div 时发生了一些非常奇怪的事情。在 IE 中，它按应有的方式显示，但在 Chrome 中，它略微向下移动。这是它在 IE 中的样子：

在此处输入图像描述

在 Chrome 中：

在此处输入图像描述

您会注意到，在 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;
}
4

3 回答 3

3

我怀疑它是 <p> 元素，它通常具有隐式边距或填充。试试“开发者工具”——IE 和 Chrome 都有自己的版本，并验证这是否是问题所在。如果是这样，则删除 <p> 标记或添加规则以删除边距和填充，并完全按照@Stacey Garrison 的建议设置它们，除了 p 而不是 body 和 html。

于 2013-05-24T17:40:16.870 回答
2

正如 Oded 所发布的，我认为您需要重置 CSS。那里有很多：

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

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

body, html {
    margin:0;
    padding:0;
}
于 2013-05-24T17:38:09.183 回答
-1

每个 Web 浏览器对代码的解释都略有不同。你只需要玩弄代码，看看在不同的场景中会发生什么。右键单击并在 IE 和 Chrome 上按“检查元素”。这将帮助您缩小问题范围。

于 2013-05-24T17:40:08.603 回答