关于浏览器渲染html页面采用的三种文本模式

nirvana1988

浏览: 136278 次
性别:
来自: 郑州

最近访客更多访客>>

xsjleilei

mft8899

javatomccsss

fengzy001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

在开启这个话题前，先看一行代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

想必做web开发的朋友都很熟悉这段代码，它一般位于html页面的头部，它是指定了浏览器在解释Html代码时所采用的渲染规范(如html各元素的显示位置及大小等)。

这个渲染规范由w3c给出，然后各浏览器根据这个渲染规范去解释html代码，最终呈现给大家丰富多彩的页面效果。

通常w3c会给出多组Doctype规范，开发人员可自由地选取一个Doctype规范，让浏览器根据这个规范去渲染页面。但在同一个Doctype规范下，不同浏览器也会采用不同的文本模式对html页面进行渲染。

而浏览器采用的文本模式的不同，最终影响到了html页面的显示效果。

现在来说说文本模式。文本模式共有诡异模式（Quirks mode ，也有翻译为兼容模式、怪异模式的）、标准模式（Standards mode ）和几乎标准模式（Almost standards mode ）三种。

上面我们提到Doctype规范决定了浏览器将会采用哪种文本模式去渲染html页面。如果当我们不指定Doctype时，IE6、IE7会采用诡异模式渲染页面，IE8以标准模式渲染页面(IE9下没测试)，ff11也是以标准模式渲染页面。当我们采用了w3c所提供的某一个Doctype规范时，可参照下面的表格以了解浏览器将会以何种文本模式渲染html页面。

通过查看上面的表格数据，w3c提供了一个不带DTD规范的Doctype，即<!Doctype html>，IE8以上的IE版本及其他主流浏览器，在这个Doctype下均会采用标准模式对html页面进行渲染。

由于HTML5不基于 SGML，它不需要在Doctype中引用DTD规范，因此<!Doctype html>被大量使用在了html页面中，让浏览器按照它们应该的方式来运行。

如何获取当前浏览器以何种文本模式渲染的html页面呢？可通过js获取document.compatMode的值来获取当前浏览器所采用的文本模式，该值一般有两个BackCompat(代表诡异文本模式)、CSS1Compat(代表标准文本模式)。

分享到：

Android中采用9.png图片实现背景图自适应 ... | 借助js操作剪切板内容，完成Excel多单元格 ...

2012-04-10 12:59
浏览 4528
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论