蜗小牛
- 浏览: 63006 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
如何在页面中设置IE浏览器的文档模式
作者：dylinshi126 | 阅读1087次 2013/6/4 12:10:39
-
最近在使用一个开源框架，发现该框架能跨浏览器和版本，但唯独在IE下的Quirks Model下表现不太好。
一开始想着如何自己去完善在该模式下的问题，后来一想为何不找到一种方法，在代码里面设置好让页面在IE浏览器下面不呈现Quirks Model呢？
于是在网上找资料，发现了原来可以通过DTD的声明来让浏览器决定用何种模式。
我把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改为
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
就不会出现Quirks Model了，问题也就解决了
================================
参考资料：
标准模式与怪异模式：
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
火狐一直工作在标准模式下，但IE（6，7，8）标准模式与怪异模式差别很大，主要体现在对盒子模型的解释上，这个很重要，下面就重点说这个。
那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：
1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
6. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。
如何设置为怪异模式：
方法一：在页面项部加 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
我们用Eclipse的HTML模板新建的html页面，自动就有上面东东
方法二：什么也不加。
如何设置为标准模式：
加入以下任意一种：
HTML4提供了三种DOCTYPE可选择：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0提供了三种DOCTYPE可选择：
(1)过渡型（Transitional ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型（Strict ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型（Frameset ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
如何判定现在是标准模式还是怪异模式：
方法一：执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式
方法二：jquery为我们提供的方法，如下：
alert($.boxModel)
alert($.support.boxModel)
IE6,7,8浏览器的标准模式还是怪异模式 盒子模型的 差异
详细说明：http://hsivonen.iki.fi/doctype/
作者：dylinshi126 | 阅读1087次 2013/6/4 12:10:39
-
最近在使用一个开源框架，发现该框架能跨浏览器和版本，但唯独在IE下的Quirks Model下表现不太好。
一开始想着如何自己去完善在该模式下的问题，后来一想为何不找到一种方法，在代码里面设置好让页面在IE浏览器下面不呈现Quirks Model呢？
于是在网上找资料，发现了原来可以通过DTD的声明来让浏览器决定用何种模式。
我把
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
改为
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
就不会出现Quirks Model了，问题也就解决了
================================
参考资料：
标准模式与怪异模式：
由于历史的原因，各个浏览器在对页面的渲染上存在差异，甚至同一浏览器在不同版本中，对页面的渲染也不同。在W3C标准出台以前，浏览器在对页面的渲染上没有统一规范，产生了差异(Quirks mode或者称为Compatibility Mode)；由于W3C标准的推出，浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)，这就是二者最简单的区别。
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
火狐一直工作在标准模式下，但IE（6，7，8）标准模式与怪异模式差别很大，主要体现在对盒子模型的解释上，这个很重要，下面就重点说这个。
那么浏览器究竟该采用哪种模式渲染呢？这就引出的DTD，既是网页的头部声明，浏览器会通过识别DTD而采用相对应的渲染模式：
1. 浏览器要使老旧的网页正常工作，但这部分网页是没有doctype声明的，所以浏览器对没有doctype声明的网页采用quirks mode解析。
2. 对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
3. 对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析
4. 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。
5. 可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。
6. 在ie6中，如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析。这条规则在ie7中已经移除了。
如何设置为怪异模式：
方法一：在页面项部加 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
我们用Eclipse的HTML模板新建的html页面，自动就有上面东东
方法二：什么也不加。
如何设置为标准模式：
加入以下任意一种：
HTML4提供了三种DOCTYPE可选择：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0提供了三种DOCTYPE可选择：
(1)过渡型（Transitional ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型（Strict ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型（Frameset ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/
如何判定现在是标准模式还是怪异模式：
方法一：执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式
方法二：jquery为我们提供的方法，如下：
alert($.boxModel)
alert($.support.boxModel)
IE6,7,8浏览器的标准模式还是怪异模式 盒子模型的 差异
详细说明：http://hsivonen.iki.fi/doctype/
分享到：
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1263<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 618CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1043script代码： <script type=" ... -
html之marquee详解
2014-03-28 10:07 644该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19061。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1942浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 767有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1224<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 654对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1911开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 592进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 951<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 575■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
顶部浮动
2013-11-29 09:37 445<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 549很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 1003CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 507定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1220{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 591<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 777所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
### 文档模式与IE浏览器模式 #### 一、引言 随着Web技术的不断发展与变化，不同的浏览器在处理HTML和CSS的方式上存在着细微差异。为了兼容各种基于不同标准开发的网站，微软在Internet Explorer 8及之后的版本中...
由于IE浏览器的某些特性和标准支持与其他现代浏览器存在差异，因此在某些情况下，我们需要在Chrome中通过脚本触发IE浏览器的启动。这个压缩包"谷歌浏览器js打开IE浏览器.rar"提供了一种方法来实现这个功能。 首先，...
IE浏览器在浏览一些网站/网页时，出现访问错误、错乱、下载不了文件时可以进行兼容性设置。下面将详细介绍IE浏览器不兼容网站网页设置方法。 一、兼容性视图设置 在IE浏览器中，可以通过以下步骤进行兼容性视图...
综上所述，"非IE浏览器实现IE功能.rar"这个压缩包可能包含安装和配置IE Tab的指南，以及其他与非IE浏览器运行IE特有功能相关的文档或资源，帮助用户在非IE浏览器中顺利加载和运行依赖OCX控件的网页。
IE浏览器由于其历史遗留的渲染引擎 Trident，处理CSS和JavaScript的方式与其他现代浏览器有所不同，这可能导致页面在IE上显示不正常。因此，开发者需要学习如何使用条件注释、DOCTYPE声明以及各种前端框架（如...
在IE浏览器中，这些控件通常通过ActiveX技术实现，这是一个微软开发的组件对象模型，允许在网页中嵌入各种功能强大的控件。 1. **浏览器兼容性**：首先，我们需要确认问题是否由IE浏览器的版本或兼容模式设置引起。...
- 在开发人员工具中选择“文档模式”，然后从下拉菜单中选择需要模拟的旧版IE浏览器版本。 除了上述设置方法，有时候还需要将特定网站添加到信任区域，来解决兼容性问题： - 打开IE选项，在常规标签下找到“更改...
在MFC IE浏览器中，可能需要实现BHO来处理特定的网页行为或者添加自定义功能。 2. **WebBrowser控件**：这是IE浏览器的核心，它是ActiveX控件，允许嵌入到其他应用程序中，提供浏览网页的能力。在MFC中，可以通过`...
这篇博客将探讨如何确保HTML5页面在IE浏览器上正常工作。 首先，了解IE浏览器对HTML5的支持情况至关重要。Internet Explorer 8及更早版本不支持许多HTML5的新特性，而从IE9开始，微软开始逐步提高对HTML5的兼容性。...
【JAVA仿IE浏览器源码】项目是一个基于Java技术实现的简单网络浏览器，旨在为开发者提供一个基础框架，以便于在该基础上进行二次开发和功能扩展。这个项目充分展示了Java语言在构建桌面应用上的能力，尤其是GUI...
IE浏览器在早期版本中采用了MDI设计，用户可以在同一个浏览器窗口中打开多个网页。 **Visual C++（VC）**： VC是微软公司开发的一款强大的C++编程工具，它集成了编译器、调试器以及资源编辑器等开发工具，支持MFC...
【标题】"C# 写的IE浏览器"指的是使用C#编程语言重新实现的一个Internet Explorer（简称IE）浏览器。在软件开发中，使用C#来编写浏览器是常见做法，因为C#提供了强大的.NET Framework和现代化的开发工具，使得构建...
在描述中提到“非常简单”，这可能意味着该源代码实现的是一个基础的IE浏览器功能，例如浏览网页、前进/后退、刷新、停止等基本操作，而没有包含复杂的特性如多标签、书签管理、隐私模式等。对于学习和理解浏览器的...
"IE.rar"是一个压缩包文件，其中包含了与IE浏览器相关的资料，如"www.pudn.com.txt"可能是一个网页链接的集合或者IE使用技巧的文档，而"第46例"可能是某种问题的案例分析或解决方案。 IE浏览器以其易用性和与...
《IE浏览器控件安装与设置Active插件》的文档主要涉及了如何在Windows 7操作系统中，特别是使用IE8浏览器，正确配置环境以便顺利安装和使用电子商务WEB接入所需的浏览器控件。以下是详细的知识点解析： 1. **取消弹...
- 故障现象：IE浏览器打开网页速度慢，或者图片、脚本等元素加载不完全。 - 解决方法：检查网络连接，禁用可能影响速度的扩展，清理浏览器历史记录，或者升级硬件如增加内存。 3. **无法打开特定网站** - 故障...
【实现和IE浏览器交互的方法】 在信息技术领域，与Internet Explorer（IE）浏览器进行交互是常见的需求，例如记录用户的浏览历史、分析用户行为、过滤和翻译网页内容，以及自动化填写表单。本文将深入探讨如何利用...
### IE浏览器概述与发展历程 #### 一、浏览器概念解析 浏览器是一种用于访问...对于开发者来说，了解IE浏览器的历史及其技术特性，有助于更好地理解和应对不同浏览器之间的差异，从而优化网页在各种浏览器上的表现。
- 为了确保网页在不同版本的IE浏览器中能够以正确的文档模式渲染，可以通过`<meta>`标签指定兼容性设置。 - 使用`http-equiv="X-UA-Compatible"`属性来告诉浏览器应该使用哪种文档模式来渲染页面。 - 例如，要...
本文将详细讲解如何在非IE浏览器中设置和使用兼容模式，以便在这些现代浏览器中通过IE打开指定链接。 首先，让我们了解为什么有些网站需要在IE中打开。许多老旧的企业系统和内部应用依赖于ActiveX控件、VBScript等...