解决ie9下网页标题显示为服务器ip的奇怪问题

在windows2008环境下部署一个网站,之后不久发现有个奇怪的现象:在ie9下网页标题没有正常显示,而是显示出服务器的ip。而在ie7、ie8、chrome、safari下都正常。

怀疑是ie9的问题

因为只有ie9下有这个问题,所以先考虑是不是ie9的bug,于是先google一下,找到了这篇微软的官方文章。按这篇文章的描述,出于安全的考虑,ie9在隐藏地址栏的时候会强制显示服务器ip,使用户远离钓鱼网站的危害。

本来以为问题就这么简单解决了,但是定睛一看,咱的ie9地址栏没隐藏啊!还得继续找原因。

怀疑是环境的问题

因为使用ie9访问开发环境(mac+nginx)没有出现这个问题。于是怀疑是不是生产环境(windows+iis)有什么东东没有配置好。

首先考虑是不是charset的问题。对比两个环境下访问的response header,没有发现什么疑点。

在最终出现问题的页面上查看源文件,复制全部内容后在服务器端保存为一个html文件,再通过url访问这个html文件,居然显示一切正常!

这样就排除了是环境的问题。但是经过仔细对比,出问题的页面的源代码和保存的html内容是完全一样的。完全相同的环境下,完全相同的代码居然出现不同的结果,真是见鬼了!

怀疑是代码的问题

使用chrome审查元素发现,head标签中的内容都跑到body里去了,而且出现了莫名其妙的一段空白:

再尝试用ie9访问开发环境(mac+nginx),相同的代码居然结果不同:

在前端群里咨询了一下,大家都认为有标签没有正常闭合。检查来检查去发现一个base和一个div闭合有问题,但是修复后问题依旧。没办法只好祭出大杀器:分段删除代码排除法。结果最后删成了这个样子:

WTF!到这里我已经丧心病狂,不能忍了,这你妹已经不能再删了啊!

都是UTF-8 BOM惹的祸

经过无数次沮丧的失败和无数次的google,终于找到了问题的所在:在windows的记事本中编辑utf-8格式的文件并保存,会在文件头部加一个BOM字符。而这个BOM字符会导致浏览器解析tag发生错乱。

编写脚本去除所有文件中的BOM字符后,问题成功解决。

参考文章

UTF-8编码中BOM的检测与删除
关于BOM头
utf-8中bom的危害及清除bom的工具下载

 

此条目发表在 HTML, IT技术 分类目录,贴了 标签。将固定链接加入收藏夹。