PHP如何处理HTML页面顶部存在空格问题

问题：HTML页面顶部出现20px高度的空格，查找源代码和PHP文件没有存在任何输出与空格，为什么会存在一个空格？

背景：HTML页面采用UTF8的格式。

分别在firefox和IE7下的情况如下图

解决思路：
一，首先要知道问题在那？
1，查看页面在源代码，另存为保存在任意地方。
2，使用Uedit32软件(可下载一个绿色版的)，打开第一步保存的文件，如下图

3，点击切换十六进制编辑模式，如下图

4，在十六进制编辑模式下，如果存在这三个字符 EF BB BF，那么这就是产生空格的原因，立即删除这三个字符。如果删除后没有存在空格，那恭喜你，你的问题解决。

了解一下相关知识：BOM相关知识

5，如何删除上面三个字符EF BB BF，但问题依然还在，这时候你就要多花点功夫检查代码。

按上面的方法，我们知道问题产生在那，但你会发现，单纯删除还是没有解决空格问题，开始第二步。

二，检查HTML代码

如果你正在使用firefox浏览器，立即下载一个HTML Validator的插件，安装后点击右键查看源程序，检查你的HTML代码，是否存在换行，空格等等，或许还有其它意外发现，但还是没有解决你的问题，真糟糕，情况看来不简单！

三，检查PHP代码

如果你已经看到这里，那我可以肯定的告诉你，你的PHP代码是产生空格的原因，同时也存在require或include的包含声明，现在马上检查PHP代码，下面看看实例存在的问题

我以主页为例index.php

1，index.php部分

1. $index = new indexService ( );
2. $postLists = $index->getPostLists ();
3. include 'template/index.phtml';

上面代码从indexService类中获取最新的文章列表，然后包含index.phtml模板文件。

2，index.phtml模板部分

1. <?php require 'header.phtml';?>
2. <div id="container">
3. <div id="right">
4. <!-- 文章列表开始 -->
5. <?php echo $postLists; ?>
6. <!-- 文章列表结束 -->
7. </div>
8. <div id="left">
9. ……左边内容区……
10. </div>
11. </div>
12. <?php include('footer.phtml') ?>

这里包含了两个文件header.phtml和footer.phtml，其中使用PHP输出了最新的文章列表，这么简单几行的代码，问题出在那，很明确没有空格，也没有多余的输入，但区别在于我们显示列表存在问题，把上面的代码改成如下：

index.php修改

1. $index = new indexService ( );
2. include 'template/index.phtml';

index.phtml修改

1. <?php require 'header.phtml';?>
2. <div id="container">
3. <div id="right">
4. <!-- 文章列表开始 -->
5. <?php echo $index->getPostLists (); ?>
6. <!-- 文章列表结束 -->
7. </div>
8. <div id="left">
9. ……左边内容区……
10. </div>
11. </div>
12. <?php include('footer.phtml') ?>

看，问题解决，这是由于在PHP中存在赋值操作而产生了额外的输出，但你不知道在那里有输出，从实例的测试情况看是由于使 用$index->getPostLists ()返回HTML代码，结果出现在顶部生成了EF BB BF这三个字符。当然，你的问题也许不一样，但认真检查一下你的PHP代码，问题基本上差不多。