最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题。后来知道是bom头的问题。

1.什么是bom头?

BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑器中不显示,但是会产生输出,就像多了一个空行。 一般的编码集中并不会出现bom头,unicode编码集中会出现。

类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。它是一串隐藏的字符,用于让记事本等编辑器识别这个文件是否以UTF-8编码。对于一般的文件,这样并不会产生什么麻烦。但对于 PHP来说,BOM是个大麻烦。

PHP并不会忽略BOM,所以在读取、包含或者引用这些文件时,会把BOM作为该文件开头正文的一部分。根据嵌入式语言的特点,这串字符将被直接执行(显示)出来。由此造成即使页面的 top padding 设置为0,也无法让整个网页紧贴浏览器顶部,因为在html一开头有这3个字符呢!
参考:http://blog.sina.com.cn/s/blog_6ec912d80101btcl.html
2.解决方法

a . editplus去BOM头的方法

编辑器调整为UTF8编码格式后,保存的文件前面会多出一串隐藏的字符(也即是BOM),用于编辑器识别这个文件是否是以UTF8编码。 
运行Editplus,点击工具,选择参数设置,选中文件,默认编码utf-8.或文件另存为,编码选择utf-8.

b. Notepad去除bom头办法

打开文件后,编码里选择utf-8无BOM格式编码,确定就ok了。

不积跬步无以至千里,加油

chrome浏览器下页面顶部出现一条空白解决的更多相关文章

  1. 取消chrome浏览器下input和textarea的默认样式

    最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动texta ...

  2. html页面顶部出现一段空白,检查控制台发现body 下出现&#65279字符,原因及解决办法

    html页面顶部出现一段空白,检查控制台发现body 下出现&#65279字符,原因及解决办法 分析: 原来是页面编码时增加了BOM,此页面后端数据主要是PHP语言,对PHP来讲PHP在设计时 ...

  3. chrome浏览器下的xdebug helper使用方法

    chrome浏览器下的xdebug helper使用方法     自从安装了xdebug后,发现每次调试都需要从eclipse中先从头启动,然后一步步走到你要调试的页面,而不是说想什么时候调试就什么时 ...

  4. Chrome浏览器清除页面js文件缓存的方法

    Chrome浏览器清除页面js文件缓存 Chrome浏览器清除js缓存方法虽然简单,但有些人还是不太会,有些人会去设置里面清除有时候没有用,这里写一下简单步骤,使用一次以后就会了,而且速度更快 1.打 ...

  5. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  6. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  7. <select>在chrome浏览器下背景透明问题

    在上篇文章<只用CSS美化选择框>运用了背景透明的技巧来美化选择框,但在chrome浏览器下遇到了跟ie.ff不一样的透明效果,下面重现一下: 在一个大的div(背景红色)内放置一个sel ...

  8. Chrome浏览器下自动填充的输入框背景

    记录下从张鑫旭老师的微博中看到关于input输入框的属性 1.autocomplete="off" autocomplete 属性规定输入字段是否应该启用自动完成功能 自动完成允许 ...

  9. chrome浏览器的跨域设置 Google Chrome浏览器下开启禁用缓存和js跨域限制--disable-web-security

    chrome用户默认路径 Win7:C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\XP:C:\Documents and Settings\ ...

随机推荐

  1. 2016年2月18日 JAVA基础

    运行JAVA之前,必须将系统环境变量进行配置. 如果是32位的计算机安装的JDK版本必须是32位的,如果是64位的计算机安装的JDK版本必须是64位的,两者不可忽视,以免程序无法正常启动. 具体更改方 ...

  2. Mysql事件学习

    出自:http://blog.chinaunix.net/uid-20639775-id-3323098.html Mysql事件学习 在系统管理或者数据库管理中,经常要周期性的执行某一个命令或者SQ ...

  3. c#扩展方法的理解(一:初识)

    扩展方法是静态方法,是类的一部分,但是实际上没有放在类的源代码中. 扩展方法所在的类也必须被声明为static C#只支持扩展方法,不支持扩展属性.扩展事件等. 扩展方法的第一个参数是要扩展的类型,放 ...

  4. POJ 3069 Saruman's Army(萨鲁曼军)

    POJ 3069 Saruman's Army(萨鲁曼军) Time Limit: 1000MS   Memory Limit: 65536K [Description] [题目描述] Saruman ...

  5. run a Freight robot (2)

    3.  Network Setup Connecting Freight to a Monitor The easiest way to configure the wireless networki ...

  6. monkey基本命令参数详解示例

    Monkey基本命令参数 参数名 基本功能 举例 -p 参数-p用于约束限制,用此参数指定一个或多个包(Package,即App).指定 包之后,Monkey将只允许系统启动指定的APP.如果不指定包 ...

  7. hdu2037-----------贪心, 活动安排问题

    http://acm.hdu.edu.cn/showproblem.php?pid=2037(简单贪心-----活动安排) #include<iostream> #include<a ...

  8. [转载] 一篇文章带你了解Paxos算法

    原文: http://dockone.io/article/640 [编者的话]本文是Quora上关于Paxos算法的回答,两位答者分别从不同的角度描述Paxos算法.Vineet Gupta的回答细 ...

  9. HDU5886 Tower Defence 【两遍树形dp】【最长链预处理】

    题意:N个点的一棵带权树.切掉某条边的价值为切后两树直径中的最大值.求各个边切掉后的价值和(共N-1项). 解法一: 强行两遍dp,思路繁琐,维护东西较多: dis表示以i为根的子树的直径,dis2表 ...

  10. linux学习笔记2-命令总结3

    文件搜索命令 1.文件搜索命令 find 2.其他文件搜索命令 grep - 在文件中搜索字串匹配的行并输出 locate - 在文件资料库中查找文件 whereis - 搜索命令所在目录及帮助文档路 ...