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

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

IE笑话浏览器应用服务器.net 
阅读更多
    昨天被一个恶心的问题雷到了，一个页面，在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  
有意思。长见识了。
发表评论

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

相关推荐

    使用vue-router设置每个页面的title方法

    基本环境配置： webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件 首先引入： import Vue from 'vue' import Router from 'vue-... title: '首页入口' } }, { /* 修改昵称 */ path: '

    一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

    在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 &lt;!Doctype html&gt; ...

    HTML1114 (HTTP 标头)的代码页 gb2312 覆盖(META 标记)的冲突的代码页 utf-8

    当尝试使用JavaScript库（如xlsx.js）将Excel数据加载到HTML表格时，在谷歌和火狐浏览器中能够正常显示数据，但在IE11浏览器中却无法正确显示，并且会抛出错误“HTML1114 (HTTP 标头)的代码页 gb2312 覆盖(META 标记...

    vue中动态设置meta标签和title标签的方法

    在使用Vue.js构建的单页应用（SPA）中，动态地修改页面的meta标签和title标签是非常重要的，尤其是对于搜索引擎优化（SEO）和用户交互体验方面。本文将详细介绍如何在Vue项目中动态设置meta标签和title标签。 ### 1...

    nuxt 服务器渲染动态设置 title和seo关键字的操作

    使用如下钩子即可，但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = ‘new title' callback(null, {}) }, 补充知识：vue 每个页面动态切换title keywords description ...

    Nuxt页面自定义meta标签和asyncData异步请求

    一、页面自定义meta标签 可以为每个页面单独设置不同的meta标签 以便于SEO 全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是：hid属性是页面的唯一标识 若想...

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

    当用户尝试打开一个UTF-8编码的网页时，IE7有时会显示空白页面，尽管查看源代码显示内容是完整的。这种问题在IE6和Firefox等其他浏览器上并不出现，表明问题可能与特定浏览器的解析机制有关。 在IE7中，浏览器解析...

    解决360双核浏览器兼容模式的页面显示问题

    360双核浏览器是当前中国浏览器市场中占有率较高的浏览器之一，其采用双核引擎，即Webkit和IE。Webkit核心负责现代网站的快速浏览，而IE核心用于保证对网银、旧版网站的兼容性。360浏览器在处理双核切换的过程中，...

    为了防止乱码，请将用于页面编码的meta charset放到title的前面

    为了防止乱码，正确使用meta charset和title的顺序 在 HTML 文档中，meta charset 和 title 是两个非常重要的元素，它们共同决定了网页的编码方式和标题显示方式。然而，很多新手在编写 HTML 代码时，易犯的错误是...

    如何解决IE兼容性问题

    此外，IE6和IE7还存在一些特有的渲染问题，这些问题往往需要特定的技术手段来解决。 #### 二、CSS Hack技巧 **1. 使用!important：** 在CSS中使用!important可以强制某些样式优先级高于其他样式。但是需要注意的...

    IE9浏览器中网页无法正常显示的解决方法

    标题中的“IE9浏览器中网页无法正常显示的解决方法”主要针对的是用户在使用Internet Explorer 9（简称IE9）浏览器时遇到的问题，即网页内容显示异常或功能无法正常使用。这种情况可能由于多种原因造成，包括但不...

    header和meta头部信息

    2. **调试工具**：开发者可以使用浏览器的开发者工具检查和修改`&lt;header&gt;`和`&lt;meta&gt;`标签，以便进行问题排查和优化。 3. **自动化工具**：如Yeoman、Grunt或Gulp等构建工具可以自动化插入、管理和更新`&lt;meta&gt;`标签，...

    IE8调用IE7渲染模式，网页高度根据内容高度显示

    通过添加`&lt;meta&gt;`标签来启用IE7兼容模式，我们可以让IE8使用IE7的动态高度计算方法，从而解决这个问题。 需要注意的是，尽管这种方法可以解决当前的兼容性问题，但它并不是一个长期的解决方案。随着浏览器版本的...

    完美解决IE9浏览器出现的对象未定义问题

    这种问题通常是由于浏览器的兼容性问题、JavaScript代码执行顺序、或者资源加载顺序不当所引起的。以下是一些有效的解决策略。 首先，当遇到“对象未定义”的错误时，我们需要进行基础的排查工作。确保所有的...

    content=”IE=7, IE=9″意思理解

    `&lt;meta http-equiv="X-UA-Compatible" content="IE=7, IE=9"&gt;`是一种用于控制IE8和IE9渲染模式的技术手段，旨在解决特定历史背景下出现的兼容性问题。随着技术的发展和浏览器的进步，这类特殊处理的需求已经大大减少...

    html中标签meta的详细使用方法和作用

    `&lt;meta http-equiv="X-UA-Compatible"&gt;`标签主要用于控制Internet Explorer（IE）浏览器的渲染模式和文档模式，以解决浏览器之间的兼容性问题。具体而言，它可以告诉IE浏览器如何渲染页面，以及是否使用Google ...

    详解关于html，css，js三者的加载顺序问题

    在HTML中，head部分是放置网页元数据的地方，其中包括字符集声明&lt;meta charset="utf-8"&gt;、网页标题&lt;title&gt;、以及链接外部资源的标签和。 在默认情况下，CSS文件的加载是与HTML文档的解析并行进行的。当浏览器在解析...

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