`
touya
  • 浏览: 76391 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

meta和title的顺序问题引起IE显示空白页

阅读更多
    昨天被一个恶心的问题雷到了,一个页面,在FF下显示正常,在IE下显示空白,完完全全的空白,没有报错,没有提示,本以为是服务器没开,结果查看空白页的源文件,又是可以看的,源文件完全正常,只能是IE解析的问题,那么是什么地方引起IE解析失败呢?
     经过排除法排查,最后锁定,居然是meta和title顺序的问题:
<head>
  <title>管理页</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="/css/admin.css" type="text/css" media="all"/>
</head>

上面的写法是空白,而下面的写法就正常显示:
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>管理页</title>
  <link rel="stylesheet" href="/css/admin.css" type="text/css" media="all"/>
  <link rel="stylesheet" href="/css/elements/externalLinks.css" type="text/css"/>
</head>

    顿悟!页面编码utf8是在meta中定义的,浏览器在读到编码前,认不出中文的title,于是解析失败!
    但是……IE你也太挫了吧?解析失败啥报错都没有??直接显示空白页,叫人怎么找错啊?
    对一般的站点来说,即使meta和title的顺序写反,应该也没问题,因为现在的动态程序一般会在程序输出的header中指定content-type为text/html;charset为utf-8,所以浏览器不需要读取meta中的编码信息就能知道编码了。
    查了一把,原来这个问题还真有大站点中过招,blogger.com就在05年时就有过该问题,也算是这些外国应用入驻中国的水土不服吧(没考虑Unicode的title,呵呵)
    http://yskin.net/2006/08/ie-utf-8-bug.html
1
0
分享到:
评论
5 楼 hlbng 2009-05-12  
谢谢了
4 楼 flashcloud 2009-03-20  
兄弟,我也被雷了一回。。。呜呜。可恶的软软
3 楼 achun 2008-11-13  
哈哈,这个问题也被你发现了.
我以前也说过这个问题,结果被IE的支持者笑话了一通.
其实title中只有有了某些中文字才会出这个问题,不是所有的中文都出的比如'的'这个字就会出问题.而其他一些不会出.
我猜测,是IE自作聪明的做了一些页面还没有解析完就开始预渲染造成的.而默认的编码方式不是UTF-8的,如果某些字的编码和默认的编码有冲突的话就会造成这个问题.
我发现在微软的软件中有很多类似自作聪明的事情,按道理出发点是好的,为用户着想,提高效率,可是活干的不好呀,反而更麻烦了.
让人担心的是这种表面上考虑多一点的想法,如果以这样的方式贯彻到微软的开发人员的开发中去的话就.................

2 楼 hax 2008-11-13  
有条件的优先在server上设好content-type。
其次你可以给文件加上BOM。
1 楼 dearshor 2008-11-12  
有意思。长见识了。

相关推荐

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

    总结来说,当遇到IE7打开页面空白但源文件完整的问题时,首先要检查页面编码设置是否正确,特别是`&lt;meta&gt;`标签与`&lt;title&gt;`标签的顺序。确保在`&lt;title&gt;`之前正确声明字符集可以有效解决这一问题。同时,对不同浏览器...

    CSS代码规范.pdf

    - 通知IE使用最新模式,通过`&lt;meta http-equiv="x-UA-Compatible" content="IE=Edge,chrome=1"&gt;`。 4. **编码与类型声明**: - 必须声明字符编码为UTF-8:`&lt;meta charset="UTF-8"&gt;`。 - 引入CSS和JavaScript文件...

    html5(视频)

    3. **全屏显示限制**:需要注意的是,全屏显示功能在Safari和Chrome中不被支持,但在Firefox 3.6及以上版本中是可以实现的。 4. **IE加载Flash文件**:对于IE浏览器,由于其不支持HTML5 `&lt;video&gt;` 元素,需要加载...

    前端面试题

    **13、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?** - 这通常是由于默认的`list-style`或`margin`/`padding`造成的。解决方法是重置样式或将`li`设置为`display: inline-block`。 **14、...

    HTML标记一览HTML web java 网页 网站

    * `&lt;TITLE&gt;`:标题定义文件标题,将显示于浏览器顶端。 排版标记 * `&lt;P&gt;`:段落标记,为字、画、表格等之间留一空白行。 * `&lt;BR&gt;`:换行标记,令字、画、表格等显示于下一行。 * `&lt;HR&gt;`:水平线插入一条水平线。 *...

Global site tag (gtag.js) - Google Analytics