IE中打开title为中文UTF-8编码的网页会显示空白页

原因:这是由于IE解析网页编码时以HTML内的标签优先,而后才是HTTP header内的讯息;而mozilla系列的浏览器则刚刚相反。由于UTF-8为3个字节表示一个汉子,而普通的GB2312或BIG5是两个。页面输出时,由于上述原因,使浏览器解析、输出<title></title>的内容时,如果在</title>前有奇数个全角字符时,IE把UTF-8当作两个字节解析时出现半个汉字的情况,这时该半个汉字会和</title>的<结合成一个乱码字,导致IE无法读完<title>部分,使整个页面为空百输出。而这个时候如果察看源文件的话,会发现实际上整个叶面全部已经输出了。

解决办法:<meta charset="UTF-8">放在<title></title>之前

做了一个小测试,使用Windows 2000 SP4操作系统,IE6 SP1和Firefox 1.5.0.5浏览器。所有文件使用DOS格式换行符。测试代码如下:
<?php header(”Content-Type: text/html; charset=utf-8″); ?><html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> <title>你好啊</title> </head> <body> 你好啊。 </body>
先不要前面的PHP语句,直接使用html文件,分无meta、meta在title前、meta在title后3种方式,分别做成GBK、UTF-8(no BOM)、UTF-8(BOM)三种编码方式的文件,再分别用IE和Firefox测试。我的Blog所在的服务器上,访问html文件时HTTP Header里Content-Type是Content-Type: text/html。第二遍测试加上PHP语句,用Header函数给HTTP Header中加上Content-Type: text/html; charset=utf-8,再把第一遍做的重新做一遍。
IE6 SP1
Firefox 1.5.0.5
字节
地址
无meta
GBK
正常
正常
73
t11.html
UTF-8(no BOM)
空白页
使用GBK解码形成乱码
80
t12.html
UTF-8(BOM)
正常
正常
83
t13.html
meta在前
GBK
使用UTF-8解码形成乱码
使用UTF-8解码形成乱码
144
t21.html
UTF-8(no BOM)
正常
正常
151
t22.html
UTF-8(BOM)
正常
正常
154
t23.html
meta在后
GBK
使用UTF-8解码形成乱码
使用UTF-8解码形成乱码
144
t31.html
UTF-8(no BOM)
空白页
正常
151
t32.html
UTF-8(BOM)
正常
正常
154
t33.html
—加了Header语句后—
无meta
GBK
使用UTF-8解码形成乱码
使用UTF-8解码形成乱码
133
t11.php
UTF-8(no BOM)
正常
正常
140
t12.php
UTF-8(BOM)
正常
正常
143
t13.php
meta在前
GBK
使用UTF-8解码形成乱码
使用UTF-8解码形成乱码
204
t21.php
UTF-8(no BOM)
正常
正常
211
t22.php
UTF-8(BOM)
正常
正常
214
t23.php
meta在后
GBK
使用UTF-8解码形成乱码
使用UTF-8解码形成乱码
204
t31.php
UTF-8(no BOM)
正常
正常
211
t32.php
UTF-8(BOM)
正常
正常
214
t33.php
文件中有6个汉字和一个汉字句号,所以UTF-8(no BOM)格式比GBK格式多出7个字节。UTF-8的BOM占用3个字节,所以UTF-8(BOM)比UTF-8(no BOM)多出3个字节。经验证,所有数据都符合这个规则,所以各文件格式没有错误。
PHP不支持BOM,又因为BOM的3个字符在最前面,显示不包含在<?php…?>标签里,所以PHP引擎会3个字符输出,于是输出的html文件也有了BOM。所以这次测试中,为了修改http header而加入的PHP语句不影响最终输出的html文件的BOM。

浏览器解析页面首先取HTTP header中的 content-type项,如果有charset就认定页面的编码方式是charset指定的值,如果没有指明,则认定为默认值。IE中文版默认值是gb2312,FF中文版默认的是GBK,然后,浏览器会看有没有BOM,一旦饭才能够有UTF-8的3字节BOM,则重新认定页面的编码方式UTF-8。然后是解码阶段,解码完成后是解析html的阶段。解析html的过程中,当解析到head部分的meta标签时,浏览器会根据<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />这个语句中的说明,重新认定编码方式为charset后面的方式,中断html解析过程,返回到解码步骤重新解码。
知道了这个步骤,再来看这个表:在加了Header语句设置了HTTP Header后,两个浏览器解析所有页面都是用的UTF-8方式,包括GBK编码的页面。(当然要正常解析GBK编码的文件,可以在title前加上个meta标签标明编码方式。)在上表的下半部分可以清楚的看到这一点。再来看上半部分,在没有加Header语句的页面里,首先浏览器认定页面编码方式为默认值GBK。检测有无UTF-8的3字节BOM,检测到的,认定页面编码方式为UTF-8,解码再解析html,一切正常。如上表所示,上半部分带BOM的页面都能正常显示。如果没有BOM,页面可能是GBK或者UTF-8(no BOM)格式,浏览器会先按照默认的GBK方式开始解码。页面为GBK格式时,无meta时正常,有meta时浏览器解析到meta标签会回头重现按UTF-8方式解码,所以GBK,meta在前或后,无论IE还是FF都是乱码。再看UTF-8(no BOM)的页面,无meta时FF用GBK方式解码下去,最终显示乱码,IE则解码出错,形成空白页。有meta时,Firefox找到meta后回头重新按UTF-8方式解码,所以无论meta在前或在后都是正常;IE则是在meta在前时能够和Firefox一样回头重新解码,当meta在后时,又是解析到title出错,返回空白页。
所以,IE显示空白页的问题,很明显是因为IE的解码程序兼容性差。

时间: 2024-10-14 21:19:47

IE中打开title为中文UTF-8编码的网页会显示空白页的相关文章

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

问题展现就像上图所示,head中什么都没有,head中的标签全部错位到body中显示,在页面的直观表现就是无故多处一行空白,很多人觉得这是编码者没有写好闭合标签的问题,嗯,是有可能,但不说现在的浏览器大都能自动补全未闭合标签,未写闭合标签也不至于让head中的内容完全移步到body中去吧.... 解决方法: 这个问题其实是由编码格式引起的,没错,就是BOM的问题,选一个比较高级的编辑器,个人推荐Notepad++,打开后选择 格式 选择以无BOM格式编码保存文档,然后就可以了. 嗯,就是这样子,

点滴记录——Ubuntu 14.04中gedit打开文件出现中文乱码问题

在中文支持配置还不完整的Ubuntu 14.04中,使用gedit打开带有中文字符的文件有时会出现乱码的情况,这是由于gedit对字符编码匹配不正确导致的,解决方法如下: 在终端中输入如下命令,然后重新打开gedit即可: gsettings set org.gnome.gedit.preferences.encodings auto-detected "['GB18030', 'GB2312', 'GBK', 'UTF-8', 'BIG5', 'CURRENT', 'UTF-16']"

java文件中文在MyEclipse中打开变成了乱码

中文乱码是因为编码格式不一致导致的. 进入Eclipse,导入一个项目工程,如果项目文件的编码与你的工具编码不一致 将会造成乱码. 如果要使插件开发应用能有更好的国际化支持,能够最大程度的支持中文输出,则最好使 Java文件使用UTF-8编码. 修改默认编码: 在菜单导航栏上Window-->Preferences 打开"首选项"对话框,左侧导航树,导航到 General-->Workspace. Windows 7平台默认为GBK,简体中文操作系统Windows XP.W

helm-mode打开文件支持中文搜索

.title { text-align: center; margin-bottom: .2em } .subtitle { text-align: center; font-size: medium; font-weight: bold; margin-top: 0 } .todo { font-family: monospace; color: red } .done { font-family: monospace; color: green } .priority { font-fami

Web设计中打开新页面或页面跳转的方法

一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打开本地网页或互联网:Respose.Write("<script language=&apos;javascript&apos;>window.open(&apos;"+ url+"&apos;);</script>&quo

Web设计中打开新页面或页面跳转的方法 js跳转页面

Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打开本地网页或互联网:Respose.Write("<script language=&apos;javascript&apos;>window.open(&apos;"+ url+"&apos;)

依赖注入的威力,.NET Core的魅力:解决MVC视图中的中文被html编码的问题

有园友在博问中提了这样一个问题 —— .NET Core 中文等非英文文字html编码输出问题,到我们的 ASP.NET Core 项目中一看,也是同样的问题. 比如下面的Razor视图代码: @{ ViewBag.Title = "代码改变世界"; } <title>@ViewBag.Title</title> 输出的html代码变成了: <title>代码改变世界</title> 上面的 @ViewBag.Title 实际上等同于下面

微信打开网址添加在浏览器中打开提示

今天要加的是一个终极解决方法:弹出一个遮罩提示用户在新的浏览器窗口打开. 再也不用管微信如何的更新,直接判断微信的ua,然后弹出一个遮罩提示用户在浏览器中打开下载.并且不加关闭的按钮.类似于下面这样子: 这样子用户就只能在浏览器中打开,并且可以直接下载应用了.欢迎打开微信扫描查看(其他扫描没有效果). 演示二维码: 源码: <!DOCTYPE html> <html lang="zh_CN"> <head> <meta http-equiv=&

Ubuntu 14.04 LTS中怎样安装fcitx中文输入法

Ubuntu 14.04 LTS中自带的iBus输入法有多么的难用,这个不用我来说,今后你会看到各种吐嘈会像滔滔江水连绵不绝的.这里我们不抱怨,我们自己来着手解决中国人自 己的Linux中文输入法问题.Fcitx是当之无愧的最好的中文输入法(框架),真的非常感谢作者——当然是中国人,不然谁给你写这头痛的东西.当 Linux走进平常百姓家的时候,我确信Fcitx的贡献起码也得有好几个百分点呀! 方法/步骤 1 一,安装fcitx,这么好的软件,ubuntu软件中心肯定是找得到的,但还是命令来得快一