- 浏览: 60274 次
- 性别:
- 来自: 大连
文章分类
最新评论
如何在页面中设置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 1215<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 565CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1012script代码: <script type=" ... -
html之marquee详解
2014-03-28 10:07 601该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 18441。html中a标签的四个属性书写是有顺序的,如果顺序不对,显 ... -
修改360浏览器内核
2014-03-10 17:19 1886浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 714有时候,为了网页设计的美观,需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1177<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 617对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1809开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 551进行网页设计时,由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 893<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 535■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得 ... -
顶部浮动
2013-11-29 09:37 408<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 503很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现 ... -
转 CSS hack:针对IE6,IE7,firefox显示不同效果
2013-09-05 13:55 963CSS hack:针对IE6,IE7,firefox显示不同效 ... -
white-space:
2013-08-30 10:57 452定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1141{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 538<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 737所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同 ...
相关推荐
另外,还可以在此修改计算机名,自定义设置“我的文档”储存目录,设置IE浏览器首页等实用功能。 Deep XP系统优化专用工具 单击“优化向导”按钮,进入Deep XP系统优化专用工具,如图所示,与很多优化工具不同的是...
期末大作业-基于javaWeb的房屋租赁管理系统源码+数据库+项目文档+PPT报告.zip 系统网站模式为MVC模式,基于MySql数据库,采用Jsp,Session绘画跟踪...3. 调式环境:火狐浏览器、IE浏览器 4. 适用环境:支持任何浏览器。
三、在电脑上打开IE浏览器,地址栏输入无线路由器IP地址,回车 四、查看说明书,在弹出的界面输入正确的用户名和密码,登陆无线路由器的设置页面 。 五、在路由器界面中找到设置向导,按其提示一步步输入即可, ...
x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使用。 1、使用一行代码来指定浏览器使用特定的文档模式。 <...
150.如何在IE浏览器工具栏上添加按钮 l51.如何使用代码设置工具栏图标 152.如何使用代码获取工具栏指针 153.如何使用代码获取状态栏指针 154.如何隐藏或显示应用程序的状态栏 155.如何在状态栏中增加新的窗格 156....
禁止IE浏览器的脚本调试程序.reg 禁止IE浏览器的升级检查.reg 禁止IE显示图片.reg 禁止IE自动安装组件.reg 禁止Outlook Express用户打开可能包含病毒的附件.reg 禁止打开或保存带病毒的Outlook邮件.reg 去掉IE...
3、采用插件技术,可以完全融入IE浏览器中,方便系统维护、方便用户操作。 4、采用自定义协议包进行数据的组装和分析,系统开放性好,便于二次开发。 5、采用了Com组件和JavaBean组件技术,很好的实现了跨平台...
3、采用插件技术,可以完全融入IE浏览器中,方便系统维护、方便用户操作。 4、采用自定义协议包进行数据的组装和分析,系统开放性好,便于二次开发。 5、采用了Com组件和JavaBean组件技术,很好的实现了跨平台...
在ASP.NET页面中推荐使用覆写(Override)而不是事件处理(Event Handler) 常用编码工具类,支持base64,md5,des,crc32 也谈谈技术面试 在C#里把ArrayList转换为Array 或 把Array转换为ArrayList C# 2.0 在.NET 2.0中...
20、修正添加文章时添加子类别在火狐和谷歌浏览器下类别名为乱码 21、修正文章分类和产品分类模块调用数据不同步生效问题 22、修正数据库备份/恢复文字表达引起客户误解为整站数据备份问题,此功能仅针对数据库...
20、修正添加文章时添加子类别在火狐和谷歌浏览器下类别名为乱码 21、修正文章分类和产品分类模块调用数据不同步生效问题 22、修正数据库备份/恢复文字表达引起客户误解为整站数据备份问题,此功能仅针对数据库...
047 如何在文档类中设置标题栏文字? 048 如何防止在标题栏上显示文档名? 049 如何禁止标题栏的最小化按钮?… 050 如何禁止标题栏的最大化按钮? 051 如何禁止标题栏的关闭按钮? 052 如何获取标题栏的按钮尺寸? 053 ...
3)修正IE浏览器下特殊格式的闪烁特效无效的BUG,现在IE浏览器下闪烁特效用发光字体特效代替! 4)修正二级以上目录调用控件时插入文件的路径转换无效的BUG 5)完善了水印控制的功能,文字水印支持更换字体及颜色! 6)优化...
例如,Google Translate(仅提供英文版)只要检测到网页的语言与谷歌浏览器的语言不同,就会在该网页顶部显示横幅。您可以点击横幅中的按钮,以便将该网页自动翻译成您选择的语言。 P.S 目前chrome已经可以通过...
实例178 如何修改IE浏览器的背景 实例179 如何在程序中控制IE窗口 实例180 如何使用默认浏览器打开指定网页 实例181 如何获取当前正在运行的程序 实例182 如何监视系统剪贴板变化 实例183 如何获取系统剪贴板的...