文档章节

如何定义IE的文档兼容模式

MLeo
 MLeo
发布于 2013/01/19 23:32
字数 793
阅读 89
收藏 0
点赞 0
评论 0

由于现在IE浏览器的多个版本共存,同时浏览器的升级也给我们的老项目带来了不可预测的风险。浏览器的兼容性问题开始困扰我们的在线项目了。

还好,微软的给我们的解决方案是设置X-UA-Compatible。

X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。

很多网站为了方便让页面在IE8/9下降级成显示为IE7就使用了X-UA-Compatible 。

IE8刚开始推出的时候跟IE7有不少不同,所以为了避免制作出的页面在IE8下面出现错误,建议直接将IE8使用IE7进行渲染。这一做法过于方便,以至于现在太多网站声明了使用IE7引擎来解析页面。

语法:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。

<meta http-equiv="X-UA-Compatible" content="edge" />

以上代码告诉IE浏览器,Windows以最高版本的IE显示内容。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

以上代码告诉IE浏览器,根据 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说,它是首选的兼容性模式。

注意X-UA-Compatible放置的位置,MSDN《定义文档兼容性》中是这样说的:

The X-UA-compatible header is not case sensitive; however, it must appear in the Web page’s header (the HEAD section) before all other elements, except for the title element and other metaelements.

X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头(HEAD 节(可能为英文网页))中。

<p>例如下面正确的例子:</p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=IE7,IE9"> <title></title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="..."> <script type="text/javascript" src="..."></script> </head> <body> <!--网页主体--> </body> </html>

被杯具的用法:

<meta charset="utf-8"> <title></title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="..."> <meta http-equiv="X-UA-Compatible" content="IE=IE7,IE9"> <script type="text/javascript" src="..."></script>

对于用上IE9/IE10的人,想跳过IE8,指定在IE7和IE9中渲染,得使用了MSDN文档推荐的语法:

<meta http-equiv="X-UA-Compatible" content="IE=7;IE=9" />

但是,以上兼容IE7/IE9的语法方式,会在IE8里会导致BUG,发现在IE8下并没有以IE7的文档模式来渲染页面。

正确的语法规则:

1.定义多种文档模式时,使用逗号(,),而非文档中提到的分号(;) 。

<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> /*或者是*/ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,IE=EmulateIE9" />

2.或者以逗号升序连写的方式

<meta http-equiv="X-UA-Compatible" content="IE=7,9" />

最后我们看一下书写方式测试


本文转载自:

共有 人打赏支持
MLeo
粉丝 9
博文 46
码字总数 6067
作品 0
普陀
程序员
X-UA-Compatible兼容模式

如何理解 IE 的文档兼容模式(X-UA-Compatible)? IE 浏览器支持多种文档兼容模式,得以因此改变页面的渲染效果。 IE9 模式支持全范围的既定行业标准,包括 HTML5(草案), W3C CSS Level 3...

HTCKF
2015/05/10
0
0
XML文件的DOCTYPE定义

DOCTYPE的常用声明:按照 HTML 4.01 XHTML 1.0 XHTML 1.1 列表如下,错误的DOCTYPE HTML PUBLIC反而会导致页面解析错误。 HTML 4.01规范分为:Strict, Transitional, Frameset <!DOCTYPE HT...

SeanCai
2010/09/15
0
0
IE兼容性之杂项(Quirks)模式

此文转载,记录下遇到的问题,暂时没有仔细考究。 IE=EmulateIE7 标签的作用 对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题。Windows Internet Explorer 8 引入了文本兼容性模式...

Rella蕾拉
2015/04/08
0
0
ie7文档模式下页面显示问题

前端开发中,发现 未知原因 这样结构的导航栏,仅在ie7下(ie6我没管)“未知原因”几个字会变得不完整,在head部分强制使用ie8文档模式问题得到解决,但是其他浏览器的兼容模式应该是不识别...

Nekron131
2013/02/23
1K
0
如何定义和建立架构?

在牛津高阶词典(第7版)中,架构(architecture)一词的解释是:the design an structure of a computer system。这个解释实际上已经描述了架构的本质:架构是关于怎么做(构成系统)的,而...

zting科技
2017/01/12
0
0
php面试题之一——HTML+CSS(基础部分)

一、HTML + CSS部分 1. 请说明 HTML 文档中 DTD 的意义和作用(酷讯) DTD,文档类型定义,是一种保证 html 文档格式正确的有效方法,在解析网页时,浏览器将使用 DTD 来检查页面的有效性(是...

chaoluo001
2017/04/25
0
0
IE 兼容模式 设置 Meta Compatible 和 Iframe 子页面的关系

背景 因为历史原因,之前很多的系统都会是 顶级页面+Iframe来加载子级页面的这种模式构件系统,而且系统都只能运行在IE6或者IE 高版本兼容模式下(IE 7模式)。 随着现在的审美原来越高,脚本...

xakoy
07/13
0
0
IE的box模型显示bug

原作者charlee、原始链接http://tech.idv2.com/2007/01/02/ie-box-model-bug/以及本声明。 box模型即由 等块元素的 margin、padding、border、width、height 等属性构成的显示模型,它是CSS...

晨曦之光
2012/03/09
73
0
详细剖析

<!DOCTYPE>的定义: <!DOCTYPE>声明位于文档中的最前面的位置,处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型,分别表示严格版本、过渡版本...

黄裳23
2014/05/06
97
0
常用网页头部meta标签收集和整理

< meta > 元素 概要 标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。...

English0523
2015/04/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
21分钟前
0
0
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
33分钟前
0
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
38分钟前
0
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
53分钟前
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
今天
0
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
今天
0
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
今天
0
0
安装tensorflow-XXX报错

报错: tensorflow-0.5.0-cp27-none-linux_x86_64.whl is not a supported wheel on this platform. 解决: wget https://bootstrap.pypa.io/get-pip.py sudo python2.7 get-pip.py sudo p......

Yao--靠自己
今天
0
0
JVM学习手册(一):JVM模型

一直从事JAVA开发,天天和JVM打交道,仔细想想对JVM还真的不是特别了解,实在是不应该.周六看了许多资料,也算有点心得,记录一下。 JVM内存模型分为5个区域:方法区,堆,虚拟机栈,本地方法栈,程序计...

勤奋的蚂蚁
今天
0
0
转行零基础该如何学Python?这些一定要明白!

转行零基础学Python编程开发难度大吗?从哪学起?近期很多小伙伴问我,如果自己转行学习Python,完全0基础能否学会呢?Python的难度到底有多大?今天,小编就来为大家详细解读一下这个问题。...

猫咪编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部