一起CSS

当前位置:一起CSS > 前端技术 > 文章正文

你从哪里来?——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),以下方法可以解决此问题:

  1. 用 UltraEdit-32 打开文件,切换到十六进制编辑模式,察看文件头部是否有 EF BB BF
  2. 用 Dreamweaver 打开,察看页面属性,看“包括 Unicode 签名 (BOM)”前面是否有个勾(默认是没有勾的)

其他编辑器请查看相应的方法。

据了解,utf-8 文件 include 还可能产生以下问题:

  1. 页面显示一个“锘”字,其他一片空白
  2. 不能登入或者不能登出
  3. 页顶出现一条空白
  4. 页顶出现错误警告
  5. 其它不正常的情况
  6. 生成的图片浏览器无法识别

所以,如果你遇到这些问题,不妨看看是不是文件“包括 Unicode 签名 (BOM)”。

========== 华丽的分割线 2011.07.23 ==========

因为本人一直用 Dreamweaver ,上面说过 Dreamweaver 默认不“包括 Unicode 签名 (BOM)”,所以我没有遇到过这个问题,所以就没有例子来截图。今天去浏览一个博客发现有这个问题,截图如下:

include上方的空格截图

截图上蓝色的区域就是产生的空格,索性他用的是绝对定位,所以没有被空格撑破页面。或许这也算是一种解决问题的办法。

具体是那个地址就不说了,这个不重要,只是拿来举个例子,没有其他意思。

查看:3,349 评论:2 标签:

随机日志

已经有 2 条群众意见

  1. 朱宝祥

    源代码里的空行对页面显示有影响? 对话

    #1
  2. 新锦程

    这都被你发现了,学习了。include 用的很少。 对话

    #2

我要发表意见