Question

好吧，这是我遇到的一个奇怪的问题。我有两个页面，略有不同，但它们共享几个相同的元素（基本上是两个图像）。

这些图像都由相同的CSS样式表控制，但是，它们在第二页上看起来都低约20-30像素。

第二页的不同之处在于它使用了之前的 Doctype声明。但是，如后所述，我不认为这是问题所在。

要查看此效果，请连续查看这两个页面：http://www.codecreek.biz/login和http://www.codecreek.biz/registration/register。

为了清楚起见，我已经看过很多可能的答案。 This似乎不是我的情况，因为我没有在这些页面上使用表格。

这是我尝试过的：

检查代码中的空格。但是，如果您查看这两个页面的来源，您实际上会注意到第二个有问题的页面在其Doctype声明之前在顶部有一个 less 的空白行。

从第二页删除PHP代码。这也没有任何影响。

将结束的PHP代码?>和<!DOCTYPE HTML>之间的空间减少为空。这再次没有任何效果。

检查BOM。我使用vim做了这个，结果证实没有使用BOM。

检查我的CSS。我没有发现任何奇怪的东西，但我是CSS的新手，所以，因为这可能是问题，这里是我的样式表的链接：http://www.codecreek.biz/resources/main.css。（免责声明：我正在重写该页面，所以如果它看起来很奇怪，你去！）。

此外，Safari的开发人员检查工具清楚地显示我的第二页上的<body>标记仅开始下降约20个像素。

老实说，我很丢失。我希望有一个简单的解决方案，但我已经在这几个小时的工作无济于事。

编辑：这是CSS，包括'标题'图像和'波浪线'图像。

#login_title { position:absolute; width:1000px; top:100px; } #login_line { position:absolute; width:500px; top:330px; left:250px; }

Answer 1

寄存器页面上的H1有一个默认的保证金。有时候，我不知道为什么，如果给第一个元素一个边距，它会将它应用于父元素。

通过给H1 #register_title一个0的上边距，你应该解决你的问题。

#register_title { margin-top: 0; }

始终记得使用reset.css实现，或者请记住默认情况下元素是样式化的。

编辑：我想指出这是一个问题，因为你以前的所有元素都是绝对定位的。你真的不应该像你一样使用绝对定位。您应该使用margin-top，padding-top来向下移动元素。只有在没有其他方法可以定位元素时才应使用绝对定位。

Answer 2

一个主要区别是第一页有标题动画javascript，它将标题移动到最终位置。 寄存器页面没有这样的逻辑。

Answer 3

在http://www.codecreek.biz/registration/register中，徽标（login_title）的位置为绝对位置，但在另一页中它是相对位置。

在http://www.codecreek.biz/registration/register中设置为亲戚时，它会修复差距。

（顺便说一下，你在http://www.codecreek.biz/login上用相对的内联覆盖它，所以'top：100'没有生效，而在另一页上就是这样）

页面顶部的奇怪空白 - HTML，CSS和PHP

3 个答案: