(转载)IE显示utf-8编码页面空白的原因及解决办法

IE显示utf-8编码页面空白的原因及解决办法

最近遇到这样的问题,UTF-8的编码在IE8中显示空白,这篇文章讲的很透彻,很不错

E-Dragon CMS 默认生成的所有物理文件都是UTF-8编码。UTF-8 的便利性不可多言,而随着 Blog 也跟着开始变成网站必备的服务之一的 RSS 出现,UTF-8 编码更是搭配 XML 以及全球各种不同语系的网站,可以说是现阶段的最佳编码选择。
再随着 Web 2.0 世代的来临,XML 的使用率也会开始从普及到变成标准,如果你的网站还在使用本地的编码,你可能会随时就会被排除在网站之间交流的便利之外。

从一些知名的 opensource 软件来看,已经纷纷将 UTF-8 设为默认或是建议编码,也可以见到这样的迹象,终于可以不用每每自己再去修改编码。不过必竟这些知名的软件多半是国外生产的,总是会东少一点西少一块。

其实我要说的是,最近一些软件都开始有大幅度的更新,以致于在升级的时候会变得更麻烦,尤其并不是所有的社群都有放出各种方式的升级档,当然遇到大幅度架构的更新,要做 patch 也的确麻烦,所以跟着的就是在使用 UTF-8 时,反而有很多档案须要修正。

这篇要说的问题就是,原本一些在本地编码的页面可以正常的执行,在转换到 UTF-8 之后,只剩下空白的一片,还须要手动指定浏览器所使用的编码为 UTF-8 才可以正常。其实这个问题很单纯,问题就出在以往的习惯在 HTML 的标头的部份我们会这么写

<head>
    <title>非英文数字开头的页面标题</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

在逻辑上这并没有任何的问题,不过随着浏览器技术的演进,以前是将整份的 HTML 文件读完后,才显示在浏灠器的窗口上,所以你可以这么说,你所看到的画面已经是浏览器经过解读后的结果,所以你也获得了正确的结果。但是在各种浏览器出现之后,网页显示的速度也变成一个比较的重点,所以页面不再是完整读完后,才全部一次显示,而是边下载的过程中,就边显示在浏览器的窗口上,这时就产生问题了,我们再看一次这段 HTML code.

<head>
    <title>非英文数字开头的页面标题</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

当浏览器收到标头的信息时,最先收到的时页面的标题 title 然后送给浏览器显示,这时候浏览器已经错误的解读了这串文字,然后才收到整份文件的编码是 UTF-8 已经来不及了,以致于最后显示的结果可能是错误的编码,或是一个空白的页面(虽然看起来是空白,但是检视原始码时你会发现,还是完整的 HTML 文件内容)。如果你有各类 script language 实作的经验,你可以更清楚的了解,在输出标头之前,是不能输出任何字符的,以 PHP 的例子,你会得到一个 Warning: Cannot modify header information - headers already sent by… 的警告讯息。

多半 script language 都会自动处理送出标头的动作,以节省写程序的时间,再以 PHP 的例子来解释:
<?php
echo "Hola!";
?>

其实在这之前 PHP 已经预先帮你处理 Content-type: text/html; 等等的信息了。如果你用 Perl 写过 CGI 就更清楚任何内容输出之前,都要先输出正确的 HTTP Header 才可以得到正确的结果。

回到正题,其实你也应该知道怎么解决了,只要先送出编码就不会有问题了,没错! 所以只要将编码移到第一行,就可以解进这个问题了。
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>非英文数字开头的页面标题</title>
</head>

如果你跟我一样是 Hard Coder 问题应该不大,如果你是依赖 Dreamweaver 这类工具,那么请养成输出后再确认一次的好习惯。

注一:
我指的标头即 header,也有档头的说法,我也不知道哪个说法比较正确或通用,大多数都直接说 header,不过为了避免过多的中英夹杂会造成阅读的困扰,所以这边都说标头。
注二:
另一个比较消极的做法,也可以直接设定 Web Server 的默认编码为 UTF-8,这样在预先处理标题时也会送出正确的编码。不过如果你的 Web Server 同时 hosting 多个不同语系的网站,这就不是好方法了。


转载自:http://hi.baidu.com/2356/blog/item/1acb5beee6e170eab2fb959e.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值