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

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

分析:

  原来是页面编码时增加了BOM,此页面后端数据主要是PHP语言,对PHP来讲PHP在设计时没有考虑BOM问题,,不会忽略UTF-8编码的文件开头BOM的那三个字符,会把BOM作为该文件开头正文的一部分。由于必须在<?或者<?php后面的代码才会作为PHP代码执行,所以将会造成在页面上输出这三个字符,显示效果就要看浏览器了,一般是一个空行或是一个乱码。由于在html一开头有这3个字符的存在,即使页面的 top padding 设置为0,也无法让整个网页紧贴浏览器顶部。由于受COOKIE送出机制的限制,在这些文件开头已经有BOM的文件中,COOKIE无法送出(因为在 COOKIE送出前PHP已经送出了文件头),所以登入和登出功能失效。一切依赖COOKIE、SESSION实现的功能全部无效。

解决办法:

  在编辑、更改任何文本文件时,请务必使用不会乱加BOM的编辑器。linux下的编辑器应该都没有这个问题。WINDOWS下,请勿使用记事本等编辑器。

推荐的编辑器是:

1、UltraEdit(需要取消‘添加BOM’的相关选项);
2、Dreamweaver(需要取消‘添加BOM’的相关选项)我是用这个解决的问题
3、Notepad(需要进行“转换为不带BOM的UTF-8”)等
4、对于已经添加了BOM的文件,要取消的话,可以用以上编辑器另存一次(Editplus需要先另存为gb,再另存为UTF-8。)

时间: 2024-10-26 17:35:26

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

PHP生成HTML页面顶部出现空白部分(#65279字符?)的解决办法

最近项目使用到ThinkPHP框架,其中一个页面顶部总是一小段空白. 如下图所示: 而且只会在chrome和edge浏览器出现,ff则不会出现这个问题.由于该页面是由PHP+HTML模板拼接接,因此先后排查了html文件.JavaScript文件.php文件.均未发现问题. 使用chrome F12发现空白处是一串&#65279字符.通过搜索,了解到这原来是UTF-8的编码问题. 我使用的编码是UTF-8 + BOM,这种编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事

Tomcat manager页面 403的真正原因及解决办法

版本:Tomcat 8.5.8 问题:新安装的tomcat,用其他机器访问tomcat的Server Status.Manager App.Host Manager三个页面均显示403(本机访问没有问题),conf/tomcat-users.xml里已添加配置: <role rolename="manager-gui"/> <role rolename="admin-gui"/> <user username="tomcat&

chrome浏览器下页面顶部出现一条空白解决

最近遇到页面在chrome浏览器下,顶部会出现一条空白的问题.后来知道是bom头的问题. 1.什么是bom头? BOM签名的意思就是告诉编辑器当前文件采用何种编码,方便编辑器识别,但是BOM虽然在编辑器中不显示,但是会产生输出,就像多了一个空行. 一般的编码集中并不会出现bom头,unicode编码集中会出现. 类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事

微信小程序-下拉松开弹不回去顶部留一段空白

注意的是刷新在json 文件中要配置 "enablePullDownRefresh":true 空白的出现有可能是多次触发下拉事件导致请求过多导致页面反应延迟. 在 onPullDownRefresh 事件里加setTimeout事件延迟下下拉刷新的事件. /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { wx.stopPullDownRefresh(); let _This = this; let oUInf

Oracle 安装 检查操作系统版本 必须是 5.0 5.1 的解决办法

打开 oraparam.ini文件 添加红色部分 Windows=5.1,5.2,6.1 最下面添加 [Windows-6.1-required]#Minimum display colours for OUI to runMIN_DISPLAY_COLORS=256#Minimum CPU speed required for OUI#CPU=300

(Chrome42)Lodop页面总提示“未安装”或“请升级”的可能原因和解决办法

Chrome42之后版本,支持NP插件默认处于关闭状态,要手工打开,方法如下: 在谷歌浏览器地址栏输入: chrome://flags/#enable-npapi 然后找到"启用NPAPI"地方看到处于启用状态. 另外64位Chome不支持js方式访问NP插件,所以目前也不能使用lodop.

手机端页面在项目中遇到的一些问题及解决办法

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题.解决方案是: (1) 看是否能把body和html的height: 100%去除掉. (2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch或者给body增加:body {overflow-x: hidden}. 2.ios页面橡皮弹回效果遮挡页面选项卡? (1) 有时

手机端页面在项目中遇到的一些问题及解决办法(持续更新)

1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题.解决方案是: (1) 看是否能把body和html的height: 100%去除掉. (2) 在滚动的容器中增加:-webkit-overflow-scrolling: touch或者给body增加:body {overflow-x: hidden}. 2.ios页面橡皮弹回效果遮挡页面选项卡? (1) 有时

React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法

做项目的过程中,来回切换页面时,一直遇到Can only update a mounted or mounting component 这个问题,原因是当离开页面以后,组件已经被卸载,执行setState时无法找到渲染组件. 解决办法特别简单,在离开页面时的周期函数(componentWillUnmount)中: //组件将被卸载 componentWillUnmount(){ //重写组件的setState方法,直接返回空 this.setState = (state,callback)=>{