html 第15章 页面顶部空白一行 html 第15章 页面顶部空白一行

2022-08-12

 导致页面顶部空白一行解决方法

①、问题

模板文件生成 html 文件之后会在 body 开头处加入一个可见的控制符 ,导致页面头部会出现一个空白行。

https://file.lulublog.cn/images/3/2022/08/y65ud8n3mt9nTM895fSwYOS30d3u08.png

原因是页面的编码是UTF-8 + BOM。

②、分析

这种编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。

它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码。

对于一般的文件,这样并不会产生什么麻烦。但对于 PHP来说,BOM是个大麻烦。

因为PHP并不会忽略BOM,所以在读取、包含或者引用这些文件时,会把BOM作为该文件开头正文的一部分。

根据嵌入式语言的特点,这串字符将被直接执行(显示)出来。

由此造成即使页面的 top padding 设置为0,也无法让整个网页紧贴浏览器顶部,因为在html一开头有这3个隐藏字符 !

③、解决

用 Editplus、Sublime Text、Dreamweaver 等编辑器,选择将文件以编码保存为 UTF-8 without BOM。

下图是 Sublime Text:

01.png

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开微信扫一扫,即可进行扫码打赏哦

阅读 502