动狮网络——专业建站,值得信赖!

动狮网络

当前位置:首页 > 网站建设 > 浏览器严格/怪异模式quirks/strict mode及盒子模型意义

浏览器严格/怪异模式quirks/strict mode及盒子模型意义

时间:2014-10-12 人气: 标签: 严格模式 怪异模式 quirks mode strict mode 盒子模型
导语:要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码。

浏览器严格/怪异模式quirks/strict mode及盒子模型意义

浏览器的标准模式与怪异模式

要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。

quirks mode和strict mode是浏览器解析css的两种模式,或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode),这就是二者最简单的区别。

W3C标准推出以后,浏览器都开始采纳新标准,但存在一个问题就是如何保证旧的网页还能继续浏览,在标准出来以前,很多页面都是根据旧的渲染方法编写的,如果用的标准来渲染,将导致页面显示异常。为保持浏览器渲染的兼容性,使以前的页面能够正常浏览,浏览器都保留了旧的渲染方法(如:微软的IE)。这样浏览器渲染上就产生了Quircks mode和Standars mode,两种渲染方法共存在一个浏览器上。

盒子模型

盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同, 先来看看我们熟悉的标准盒子模型:

浏览器严格/怪异模式quirks/strict mode及盒子模型意义

W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 

IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

那应该选择哪中盒子模型呢?当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢?很简单,就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。

table字体继承

在quirks mode 和 strict mode中还有一个区别 。 在strict mode 中, table的css属性font-size会继承父级元素的 ,也就是说,table中的字体大小会继承父级元素字体的大小。 在quirks mode 中, table的css属性font-size不会继承父级元素的 ,需要专门设置一下。也就是说,table中的字体大小不会继承父级元素字体的大小。

顶一下 (7)100%
踩一下 (0)0%
热点内容
解决方案
联系方式

    郑州动狮网络技术有限公司
    【大成图文-河南ICP网站备案中心】

    QQ:361461588

    电话:

    邮箱:[email protected]

    网址:www.movelion.com

    地址:河南省郑州市管城区郑汴路升龙环球大厦A座2号馆西门一楼(升龙金泰成名灯广场正门东侧)

在线咨询
新版帮助
扫二微码

网址二维码

微信官方账号

返回顶部