你从哪里来?——include上方的空格
include 一个文件之后,这块代码的上面出现了很多空格,有木有!!!
前段时间我就遇到这样的问题,用 Firebug 查看,看到代码有一个地方“断”开了,点击那块区域竟然能编辑,里面全是空格。把这些空格删掉之后页面就正常了。好吧,既然是页面上多了空格,那就删掉。然后在源文件里没有看到空格,甚至连标签的缩进都删除了,那些空格依然存在。
经过排查,发现是 include 的文件问题,但是为什么这个文件会有问题呢?百度 GG 后,才知道这个问题由 utf-8 文件 Unicode 签名 (BOM) 产生的。
什么是 Unicode 签名 (BOM)?
BOM(Byte Order Mark),是 utf 编码方案里用于标识编码的标准标记,在 utf-16 里本来是 FF FE,变成 utf-8 就成了 EF BB BF。这个标记是可选的,因为 utf-8 字节没有顺序,所以它可以被用来检测一个字节流是否是 utf-8 编码的。微软做这种检测,但有些软件不做这种检测,而把它当作正常字符处理。
微软在自己的 utf-8 格式的文本文件之前加上了 EF BB BF 三个字节, Windows 上面的 Notepad 等程序就是根据这三个字节来确定一个文本文件是 ASCII 的还是 utf-8 的, 然而这个只是微软暗自作的标记, 其它平台上并没有对 utf-8 文本文件做个这样的标记。也就是说一个 utf-8 文件可能有 BOM,也可能没有 BOM。
如何解决?
知道了原因,问题就好解决了,就是让 utf-8 文件不包含或者取消 Unicode 签名 (BOM),以下方法可以解决此问题:
- 用 UltraEdit-32 打开文件,切换到十六进制编辑模式,察看文件头部是否有 EF BB BF
- 用 Dreamweaver 打开,察看页面属性,看“包括 Unicode 签名 (BOM)”前面是否有个勾(默认是没有勾的)
其他编辑器请查看相应的方法。
据了解,utf-8 文件 include 还可能产生以下问题:
- 页面显示一个“锘”字,其他一片空白
- 不能登入或者不能登出
- 页顶出现一条空白
- 页顶出现错误警告
- 其它不正常的情况
- 生成的图片浏览器无法识别
所以,如果你遇到这些问题,不妨看看是不是文件“包括 Unicode 签名 (BOM)”。
========== 华丽的分割线 2011.07.23 ==========
因为本人一直用 Dreamweaver ,上面说过 Dreamweaver 默认不“包括 Unicode 签名 (BOM)”,所以我没有遇到过这个问题,所以就没有例子来截图。今天去浏览一个博客发现有这个问题,截图如下:

截图上蓝色的区域就是产生的空格,索性他用的是绝对定位,所以没有被空格撑破页面。或许这也算是一种解决问题的办法。
具体是那个地址就不说了,这个不重要,只是拿来举个例子,没有其他意思。