zoukankan      html  css  js  c++  java
  • &#65279导致页面顶部空白一行解决方法

        今天做了两个静态html页面,在浏览器中测试的时候,发现其中一个html页面的顶部多出了些许空白,而另一个页面显示正常。在浏览器中进行了审查对比,发现有空白的那个页面的head标签里面的元素全部跑到了body里面,而且body中还多出了一个,当把这个东西删除之后就正常了。然后又在编辑器中,对比了一下这两个页面的源码,发现head部分完全一样,body中的代码也没有什么异常。最后通过查阅相关资料,才发现原来是编码的问题。

        页面的编码如果是UTF-8 + BOM,会在body开头处加入一个可见的控制符,导致页面头部会出现一个空白。这种编码方式一般会在windows操作系统中出现,比如记事本编辑器,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码。对于一般的文件,这样并不会产生什么麻烦。但对于html来说,BOM是个大麻烦。因为浏览器在解析html页面时,并不会忽略BOM,所以在解析html文件时,会把BOM作为该文件开头正文的一部分,这串字符也将会被直接执行(在页面中并不显示)出来。由此造成即使页面的 top或者padding 设置为0,也无法让整个网页紧贴浏览器顶部,因为在html一开头有这3个隐藏字符

    解决办法:

        在各种编辑器中,都有相应的保存utf-8编码的方法,我用的是sublime text,点击file>save with Encoding 选择utf-8就可以了,详细步骤如下图所示:

     

  • 相关阅读:
    leetcode108 Convert Sorted Array to Binary Search Tree
    leetcode98 Validate Binary Search Tree
    leetcode103 Binary Tree Zigzag Level Order Traversal
    leetcode116 Populating Next Right Pointers in Each Node
    Python全栈之路Day15
    Python全栈之路Day11
    集群监控
    Python全栈之路Day10
    自动部署反向代理、web、nfs
    5.Scss的插值
  • 原文地址:https://www.cnblogs.com/webhome/p/6182566.html
Copyright © 2011-2022 走看看