UTF8-BOM编码导致Html顶部白条问题

自从给博客加上了Google Adsense的广告,就出现了一个很困扰我的问题:网页顶部莫名空出了一个白条。虽然对于网页的访问没有什么影响,但是...强迫症不能忍啊!这一切的背后,究竟是人性的扭曲,还是道德的沦丧,请阅读本篇文章~(大雾

0x01 问题分析

嗯...遇到html问题先浏览器F12一下,立刻就发现了异常,在body部分的开头出现了如下代码:

"


"

经过测试,顶部的白条确实是由于这串代码造成的,可是我并没有蠢到会去写这个啊喂!那么究竟是什么原因呢?

0x02 排除法发现问题

首先由于是加入了Google Ads之后才出现的情况,第一时间想到的就是先去掉广告代码。可是去掉后重新部署依然出现该问题,已基本确定并非Google Ads造成。

紧接着我想到去翻一翻Coding的提交历史,对几个历史版本进行逐行对比,最终我把目光锁定在了这里:

咦?第一行中两个相同的<为什么会显示不同呢?由于代码是在Windows上面修改的,而很多奇奇怪怪的编码问题都发生在Windows上面,所以我的第一反应就是编码问题。

因为写代码比较喜欢用Notepad++,就检查了一下Header.php的编码,发现竟然是带BOM格式的UTF8!

那么什么是BOM呢?

UTF-8 BOM又叫UTF-8 签名,其实UTF-8 的BOM对UFT-8没有作用,是为了支援UTF-16,UTF-32才加上的BOM,BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑器中不显示,但是会产生输出,就像多了一个空行。

这多出来的一个空行就造成了网页中顶部的白条,也解释了前面为什么在提交历史中看似一样的两个<却被识别为不同。哈~原来是BOM的锅~

0x03 解决方法

在Notepad++编码中修改成无BOM后重新提交Git并部署,果然问题不再复现。

同时我也发现使用Windows记事本编辑php文件也很可能被加上BOM头,所以没事写代码不要用乱加BOM的编辑器

参考链接:

[1]https://baike.baidu.com/item/BOM/2790364?fr=aladdin [2]https://www.cnblogs.com/wt645631686/p/6868826.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

基础篇-app上传小准备及上架后搜索不显示

        app上传中会需要准备一些文件,如 icon图标,launch Image ,itunes Contect 中还需要上传不同尺寸的屏幕截图等,下...

24720
来自专栏GIS讲堂

eCharts添加自定义geojson数据实现地图展示

当初看到echarts的地图的时候感觉可以做点什么,但是一直米有实施,最近刚好用到了,就研究了研究,在echarts中添加了自定义的geojson数据,实现数据...

3.4K40
来自专栏技术总结

Button重复点击,你限制了吗?

32760
来自专栏美丽应用

自改:(对编程友好的)百度手机输入法皮肤

24730
来自专栏Coco的专栏

《HTML重构》读书笔记&思维导图

20040
来自专栏谈补锅

cordova for ios: Unable to simultaneously satisfy constraints.

  使用cordova开发ios项目的时候,在上传图片碰到一个问题。使用html的<input type="file"/>标签来选择照片或者拍照片,引起了布局报...

14540
来自专栏糊一笑

微信小程序初探【类微信UI聊天简单实现】

微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的...

62850
来自专栏谦谦君子修罗刀

项目开发解决方案及参考文献

玩转 iOS 10 推送 —— UserNotifications Framework(上) iOS 接收推送消息后跳转到某个页面(适配iOS10)

20210
来自专栏Android机动车

大杀器Bodymovin和Lottie:把AE动画转换成HTML5/Android/iOS原生动画

Airbnb出了移动端的动画库Lottie,可以和一个名叫Bodymovin的AE插件结合起来,把在AE上做好的动画导出为json文件,然后以Android/i...

37910
来自专栏小特工作室

基于JQuery EasyUI的WebForm控件封装(含源码)

      做WebForm软件的朋友们,对于JQuery EasyUI类库肯定不会陌生,它是基于JQuery类库编写的,据说是国人开发的,真是神人啊.使用此控...

275100

扫码关注云+社区

领取腾讯云代金券