昨天被一个恶心的问题雷到了,一个页面,在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
分享到:
相关推荐
基本环境配置: webpack + vue2.0 + vue-router +nodeJS 进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-... title: '首页入口' } }, { /* 修改昵称 */ path: '
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: ...
一、页面自定义meta标签 可以为每个页面单独设置不同的meta标签 以便于SEO 全局的meta标签在nuxt.config.js文件里配置 而单独的meta标签在组件的内部标签内进行配置即可 值得注意的是:hid属性是页面的唯一标识 若想...
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 <!Doctype html> ...
META标签,是HTML语言head区的一个辅助性标签
使用如下钩子即可,但是前提条件是 没有默认配置head的title asyncData ({ app }, callback) { app.head.title = ‘new title' callback(null, {}) }, 补充知识:vue 每个页面动态切换title keywords description ...
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 1 <!Doctype html> 2 <... 3 <...
在ie6和firefox下都正常,但是在ie7下偶尔会出现这样的情况。 一开始我怀疑是IDC的问题,后来又想到了js、css、页面结构等。偶然间我想到了编码。毕竟编码的问题已经不是一两次找过我麻烦了。 解决: <title>...
上传excel表,将excel数据内容加载到页面table上,谷歌、火狐浏览器正常显示,IE11浏览器不显示加载的数据,报错:HTML1114 (HTTP 标头)的代码页 gb2312 覆盖(META 标记)的冲突的代码页 utf-8
META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的标记和<TITLE>标记之间,它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于...
手机页面中的 手机 HTML5 开发 meta设置,要注意的地方
搜索引擎和 HTML Meta 标签(Meta Tags)
可以轻松获取对方的head头部seo信息
meta标签详解meta标签详解meta标签详解meta标签详解meta标签详解
为了防止乱码,请将用于页面编码的meta charset放到title的前面
移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致...
公司的项目在老总的IE9下无法正常访问了。 哎,苦逼啊。本以为搞定了IE6,7,8,firefox,chrome,safari,opera,就行了。 尼玛的单独一个IE6就够咱折腾会了。 以前没有IE9的时候,为了照顾ie8就写个<meta ...
使mainiframe的高度根据网页高度自定义,在IE7中可以使用,IE8中无法使用,只要在<head></head>之间加入<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,IE8调用IE7的渲染模式,就可以使mainiframe...
Meta分析论文写作,数据提取,这方面的指导很全面