`

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

    博客分类：
  • C#
IEPHPFirefox浏览器HTML 
阅读更多

做网站时候遇到这个问题，自己解决了！，留下来也许别人也有这个问题先附上一个简单的解决办法：在网页文件的<head></head>标签中一定要把字符定义
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
放在<title></title>之前。
原因就是ie的不标准引起的，所以在所有以ie为内核的浏览器中都由这个问题。
很久很久以前(大概2005年10月~2006年3月)，当时在blogger.com写Blog。当时blogger.com有中文界面，对中文用户也算是比较关心了，不过blogger.com的所有模版里都有一个问题，那就是<title>标签被放在<meta>标签前面。当title为中文的时(比如Blog名为中文或者文章标题为中文)，在IE下会出现显示空白页的问题。昨天Dre·J在群里又问到这个问题，今天过来好好研究一下。
这个问题只存在于blogger.com中，WordPress系统中不存在。先说一下在blogger.com中这个问题的解决办法：在模版的<body>标签下面找到<title>标签，调整成这样：
<$BlogMetaData$> <title><$BlogPageTitle$></title>
保证meta在前面就可以了。可以参考《感谢Yskin》和《UTF-8字符集网页在IE上会显示空白问题的解决方案》。
这个问题要从浏览器解析html的方式讲起。浏览器读取了页面的html代码后开始进行解析。解析前浏览器要先知道页面的编码方式，然后根据编码方式进行解码，然后才能开始解析。我大概想了一下，浏览器可以从下面3个方面得到页面编码方式：HTTP Header中的”Content-Type”项、返回的html代码开头是否有BOM、html代码中的meta标签。
做了一个小测试，使用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。
从测试结果可以看出，浏览器(无论是IE还是Firefox)在解析页面时，首先取HTTP Header中的Content-Type项，如果有写明charset的话就认定页面的编码方式为charset指定的值。如果没有指明，则认定为默认值。根据上表，IE中文版的默认值是GB2312，Firefox中文版的默认值是GBK，不过IE的GB2312好像和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的解码程序兼容性差。上网查了下，GBK的编码范围是0×8140-0xfefe。从GB2312-80开始，因为ASCII码的范围是0~127，首字位是0，所以GB2312-80使用双字节，并设置首字位为1。“GBK 亦采用双字节表示，总体编码范围为 8140-FEFE，首字节在 81-FE 之间，尾字节在 […]

分享到：
| 用ie读取asp文件空白和在win2003上的增加 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    utf-8 网页不显示+utf-8网页乱码的通用解决方法

    在处理UTF-8编码的网页时，可能会遇到网页不显示或显示乱码的问题。这些现象可能是由于客户端浏览器设置不当，或是服务器端的编码设置不正确所引起的。以下，我们将详细介绍几种通用的解决方案： 首先，针对浏览器...

    ie7打开页面有源文件但页面空白问题的解决方法

    当UTF-8编码的页面在IE7中解析时，如果`&lt;title&gt;`标签内部存在奇数个全角字符（每个全角字符在UTF-8中占3个字节），IE7可能会将其错误地解析为两个字节，导致半个汉字与`&lt;/title&gt;`的开始标签"结合，形成乱码，从而...

    js利用IE通过windowopen方式保存网页部分内容到本地

    charset=utf-8`，以确保内容正确编码。 3. **插入具体内容**：将需要保存的网页部分文本插入到新窗口的`&lt;body&gt;`标签内。这一步通常涉及到对原始页面内容的选择和提取，示例中的`a.innerText`表示从某个元素中获取...

    HTML-CSS.md

    - `&lt;meta charset="UTF-8"&gt;`: 设置文档的字符编码。 - `&lt;title&gt;`: 定义文档的标题，显示在浏览器标签页的标题栏上。 - **主体内容** (`&lt;body&gt;`): 页面可见内容的容器。 ##### 2. HTML编写规范 - **嵌套规则**: ...

    CSS代码规范.pdf

    - 必须声明字符编码为UTF-8：`&lt;meta charset="UTF-8"&gt;`。 - 引入CSS和JavaScript文件时不指定type，因为它们默认是`text/css`和`text/javascript`。 5. **属性顺序**： - class -&gt; id -&gt; data-* -&gt; src/for/type...

Magicbox
Global site tag (gtag.js) - Google Analytics