页面顶部的奇怪空白 - HTML，CSS和PHP
[英]Strange Blank Space at Top of Page – HTML, CSS, and PHP
问题描述
Alright, this is a weird problem I'm having. 
好吧，这是我遇到的一个奇怪的问题。 I have two pages, which are slightly different, but that share several of the same elements (two images, basically). 我有两个页面，略有不同，但共享几个相同的元素（两个图像，基本上）。
These images are both controlled by the same CSS style sheet, however, they both seem to be about 20-30 pixels lower on the second page. 这些图像都由相同的CSS样式表控制，但是，它们在第二页上似乎都低约20-30像素。
The second page is different in the fact that it uses PHP before the Doctype Declaration. 第二页的不同之处在于它在Doctype声明之前使用PHP。 However, as said later on, I don't think this is the problem. 但是，如后所述，我不认为这是问题所在。
To see this effect, look at both of these pages consecutively: http://www.codecreek.biz/login and http://www.codecreek.biz/registration/register . 要查看此效果，请连续查看这两个页面： http ： //www.codecreek.biz/login和http://www.codecreek.biz/registration/register 。
Just to be clear, I've looked at many possible answers on this already. 为了清楚起见，我已经看过很多可能的答案。 This doesn't appear to be my case, as I'm not using a table on these pages. 这似乎不是我的情况，因为我没有在这些页面上使用表格。
Here's what I've tried: 这是我尝试过的：
- Checking for whitespace in the code. 检查代码中的空格。 However, if you view the sources for both of these pages, you'll actually notice that the second, problematic one has one less line of whitespace at the top, before its Doctype Declaration. 但是，如果您查看这两个页面的来源，您实际上会注意到第二个有问题的页面在其Doctype声明之前在顶部有一个较少的空白行。
- Removing the PHP code from the second page. 从第二页删除PHP代码。 This didn't have any effect either. 这也没有任何影响。
- Reducing the apparent space between the closing PHP tag
?>and the<!DOCTYPE HTML>to nothing.将关闭的PHP标记?>和<!DOCTYPE HTML>之间的空间减少为空。 This again didn't have any effect.这再次没有任何效果。 - Checking for a BOM . 检查BOM 。 I did this using vim, and the results confirmed that no BOM was used. 我使用vim做了这个，结果证实没有使用BOM。
- Checking my CSS. 检查我的CSS。 I didn't find anything strange, but I'm quite a novice at CSS, so, as this might be the problem, here's the link to my style sheet: http://www.codecreek.biz/resources/main.css . 我没有发现任何奇怪的东西，但我是CSS的新手，所以，因为这可能是问题，这里是我的样式表的链接： http ： //www.codecreek.biz/resources/main.css 。 (Disclaimer: I'm in the process of rewriting that page, so if it looks quite strange, there you go !). （免责声明：我正在重写该页面，所以如果它看起来很奇怪，你去吧！）。
Additionally, Safari's developer inspection tool clearly shows that the <body> tag on my second page only begins around 20 pixels down. 此外，Safari的开发人员检查工具清楚地显示我的第二页上的<body>标签仅开始大约20像素。
I'm honestly quite lost. 老实说，我很丢失。 I'm hoping there is a simple fix for this, but I've been working on this for several hours to no avail. 我希望有一个简单的解决办法，但我一直在努力这几个小时无济于事。
EDIT: Here's the CSS, both for the 'title' image, and the 'squiggly line' image. 编辑：这是CSS，包括'标题'图像和'波浪线'图像。
#login_title { position:absolute; width:1000px; top:100px; }
#login_line { position:absolute; width:500px; top:330px; left:250px; }
3 个解决方案
解决方案1
9 已采纳 2012-04-12 22:29:31
The H1 on the register page has a default Margin to it. 寄存器页面上的H1有一个默认的保证金。 Sometimes, I don't know why, if you give the first element a margin, it applies it to the parent. 有时，我不知道为什么，如果你给第一个元素一个边距，它会将它应用于父元素。
By giving the H1 #register_title a top margin of 0, you should fix your problem. 通过给H1 #register_title一个0的上边距，你应该解决你的问题。
#register_title { margin-top: 0; }
Always remember to use a reset.css implementation or keep in mind that elements are styled by default. 始终记得使用reset.css实现，或者请记住默认情况下元素是样式化的。
Edit: I'd like to point out that this was an issue because of all your previous elements were absolutely positioned. 编辑：我想指出这是一个问题，因为你以前的所有元素都是绝对定位的。 You really should not be using absolute positioning the way you are. 你真的不应该像你一样使用绝对定位。 You should use margin-top, padding-top to move elements down the page. 您应该使用margin-top，padding-top来向下移动元素。 Absolute positioning should only be used when no other avenues of positioning an element are available. 只有在没有其他定位元素的途径时才能使用绝对定位。
解决方案2
0 2012-04-12 22:27:52
One major difference is that the first page has title animation javascript which moves the title to its final position. 一个主要的区别是第一页有标题动画javascript ，它将标题移动到最终位置。 The register page has no such logic. 注册页面没有这样的逻辑。
解决方案3
0 2012-04-12 22:29:46
In http://www.codecreek.biz/registration/register , the logo (login_title) has a position of absolute, but in the other page it's relative. 在http://www.codecreek.biz/registration/register中 ，徽标（login_title）的位置是绝对的，但在另一个页面中它是相对的。
When set to relative in http://www.codecreek.biz/registration/register , it fixes the gap. 当在http://www.codecreek.biz/registration/register中设置为relative时，它修复了这个差距。
(You're overriding it inline on http://www.codecreek.biz/login with relative by the way, so the 'top: 100' isn't taking effect, where as it is on the other page) （顺便说一下，你在http://www.codecreek.biz/login上用相对的内联覆盖它，所以'top：100'没有生效，在另一页上它就是这样）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.