首页 » 网络 » head标签中的title,link,meta等的元素错位显示到body里面去了的解决方法

head标签中的title,link,meta等的元素错位显示到body里面去了的解决方法

 
文章目录

今天在维护公司网站的时候发现首页部分最顶上多出一行空白行,很影响美观,使用网上的办法已完美解决,特此分享给大家。

现象:页面顶端出现多余的空行,查看源代码显示正常。但是使用谷歌浏览器的“审查元素”可以发现异常。

正常状态

head标签中的title,link,meta等的元素错位显示到body里面去了的解决方法

错误状态

head标签中的title,link,meta等的元素错位显示到body里面去了的解决方法

问题展现就像上图所示,head中什么都没有,head中的标签全部错位到body中显示,在页面的直观表现就是无故多处一行空白,很多人觉得这是编码者没有写好闭合标签的问题,嗯,是有可能,但不说现在的浏览器大都能自动补全未闭合标签,未写闭合标签也不至于让head中的内容完全移步到body中去吧....

解决方法:

这个问题其实是由编码格式引起的,没错,就是BOM的问题,选一个比较高级的编辑器,个人推荐Notepad ,打开后选择 格式 选择以无BOM格式编码保存文档,然后就可以了。

 

 

但是这里还有个问题,有时候自己也不知道是哪个文件含有了BOM,而网页include的文件又比较多的情况下,一个一个看太费事,刚好在csdn论坛看到位仁兄也有这样的问题,并且给了个简单的办法。

 

 

使用的方法是将该代码放入文件后放在网站的根目录,或者你想去哪个目录的BOM就放在哪个目录,然后直接用URL访问这个PHP文件就可以了!

最后的执行结果:

结果

结果

原文链接:head标签中的title,link,meta等的元素错位显示到body里面去了的解决方法,转载请注明来源!

0