标签 记事本bug 下的文章

解决网站顶部出现白条导致CSS错位的问题


初到一个公司,一个PHP网站上方出现一道白条,在特定的CSS布局下整体下移不会感觉错位,但是在一些CSS布局中就会直接导致整个网页乱掉。这种情况一般在特定的环境下会被环境忽视掉,就是说本地可能没有,到服务器上就有了,让人很难办。

同样原因的类似问题还有如下这些:
–不能登入或者不能登出;
–页顶出现一条空白;
–页顶出现错误警告;
–其它不正常的情况。

分析原因:
在排查了CSS和PHP代码后,我们会发现通常出现上述问题的都是UTF-8编码的网站,GBK的不会出现。那我们就要想是不是编码的问题。最终的根本原因是类似WINDOWS自带的记事本等某些编辑软件在编辑UTF-8代码是将编码格式转换成了UTF-8 带BOM HEADER的格式,这种格式会在文件最开始的地方插入3个开不见的字符,以便于下次编辑时该软件可以识别这个文件的编码格式。

但对于 PHP来说,PHP在设计时就没有考虑BOM的问题,不会忽略UTF-8编码的文件开头BOM的那三个字符,会把BOM作为该文件开头正文的一部分。由于必须在
解决办法:

在编辑、更改任何文本文件时,请务必使用不会乱加BOM的编辑器。Linux下的编辑器应该都没有这个问题。WINDOWS下,请勿使用记事本等编辑器。推荐的编辑器是:
Editplus
EmEditor
UltraEdit (取消‘添加BOM’的相关选项)
Dreamweaver (取消‘添加BOM’的相关选项)
Notepad (进行“转换为不带BOM的UTF-8”)

对于已经添加了BOM的文件,要取消的话,可以用以上编辑器另存一次。(Editplus需要先另存为gbk,再另存为UTF-8。Dreamweaver在”页面属性“的 “包含Unicode 签名(BOM)”取消即可,Notepad 在编码中将其转换成UTF-8 WITHOUT BOM)