`
kino
  • 浏览: 104400 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

浏览器的两种模式quirks mode 和strict mode

阅读更多

在看js代码时,有时会看到关于quirks mode(怪异模式)和strict mode(严格格式)的东西,一直也没深究怎么回事,只是零零碎碎的有些概念,最近终于受不了这种似懂非懂的感觉,决定好好学习总结一下。

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

2、历史原因。

当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).


3、后来的浏览器虽然支持strict mode,但众多浏览器并未放弃支持quirks mode。

一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以,这些支持两种模式的浏览器当拿到一张网页时,所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。注:Explorer 5仍然只支持quirks mode



4、浏览器如何判断何用哪种方式解析CSS?

解决方案就是采用doctype声明,大多数浏览器采用下面的这些判断规则

  •     浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。
  •     对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/
  •     对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:

对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析

 

在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。


可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。


在ie6中,如果在doctype声明前有一个xml声明(比如:<?xml version="1.0" encoding="iso-8859-1"?>),则采用quirks mode解析。这条规则在ie7中已经移除了。


5、mozilla提出了almost strict moede ,和strict mode的区别是:

img元素在strict中是inline的,而在almost strict mode中是block的。其实我们前面所说,在大多数浏览器,大多数doctype声明触发的是almost strict mode;


6、quirks mode和strict mode最大的不同就是提现在对盒模式的解释上 ,这也是我们在js里要注意的地方。


什么是盒模式? 这是针对块级元素说的,我这里只简单说一下(详情请查阅相关资料)。说白了就是把块级元素想像成一个装东西的盒子,而margin,padding,border,width这些css属性构成了盒模式。

 

而区别就是产生在width属性上:


strict mode中

width是内容宽度 ,也就是说,元素真正的宽度 = margin-left  +  border-left-width  +  padding-left  + width  +  padding-right  +  border-right-width  +  margin-right;

 

quirks mode中

width则是元素的实际宽度 ,内容宽度 = width  -  (margin-left  +  margin-right  +  padding-left  +  padding-right  +  border-left-width  +  border-right-width)


这里把盒模式相关的东西记录一下,备忘


·内联元素 ,例如<a>、<span>等,定义上下边界不会影响到行高(line-height),内联元素距离上一行元素的距离由行高决定,而不是填充或边界。 注2.  内联元素(display: inline) 内联元素不需要在新行内显示,而且也不强迫其后的元素换行,如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

·浮动元素(无论左或者右浮动)边界不压缩 ,且若浮动元素不声明宽度,则其宽度趋向于0,即压缩到其内容能承受的最小宽度。

·如果盒中没有内容,则即使定义了宽度和高度都为100%,实际上只占0% ,因此不会被显示,此点在采取层布局的时候需特别注意。

·边界值可为负,其显示效果各浏览器可能不相同

·填充值不可为负

·边框默认的样式(border-style)为不显示(none)


7、在quirks mode 和 strict mode中还有一个区别 ,但没经过验证,我只是发现有这个现象。

strict mode 中,

table的css属性font-size会继承父级元素的 ,也就是说,table中的字体大小会继承父级元素字体的大小。

quirks mode 中,

table的css属性font-size不会继承父级元素的 ,需要专门设置一下。也就是说,table中的字体大小不会继承父级元素字体的大小。


8、在js中如何判断当前浏览器正在以何种方式解析?
    document对象有个属性compatMode ,它有两个值:
        BackCompat    对应quirks mode
        CSS1Compat    对应strict mode

9、我们在编写跨浏览器兼容性的js代码时,常用到的判断代码(来源于ext)

	var ua = navigator.userAgent.toLowerCase();
        var client = {
        isStrict:   document.compatMode == 'CSS1Compat',
        isOpera:    ua.indexOf('opera') > -1,
        isIE:       ua.indexOf('msie') > -1,
        isIE7:      ua.indexOf('msie 7') > -1,
        isSafari:   /webkit|khtml/.test(ua),
        isWindows:  ua.indexOf('windows') != -1 || ua.indexOf('win32') != -1,
        isMac:      ua.indexOf('macintosh') != -1 || ua.indexOf('mac os x') != -1,
        isLinux:    ua.indexOf('linux') != -1
        };
        client.isBorderBox = client.isIE && !client.isStrict;
        client.isSafari3 = client.isSafari && !!(document.evaluate);
        client.isGecko = ua.indexOf('gecko') != -1 && !client.isSafari;

        /**
         * You're not sill using IE6 are you?
         */
        var ltIE7 = client.isIE && !client.isIE7;
 




10、废话 :我不知道现在的很多js框架为什么还对解析模式进行了判断。我认为这些框架肯定是给现在要开发的项目使用的,那应该都是strict mode才对呀?是不是因为还有很多人不习惯给页面加上doctype声明呢?

 

 

本文地址:http://kino.iteye.com/blog/241260 ,转载请注明,谢谢!

分享到:
评论
4 楼 jimylion 2011-09-08  
esay 写道
esay 写道

好文章,受益匪浅啊!以前碰到很多奇怪的问题,现在终于豁然开朗,谢谢你9527!

补充一下,第七点,确实如楼主所说。在quirks mode 中,table的css属性不会去继承父节点的,我试了一下style="font-size:30px; color:red; font-weight:bold;"都是如此,其它属性未没有验证,我的是IE7


在webkit浏览器中td的font-size属性会继承table中font-size的默认大小,设置table的font-size无效,是否遇到同样的问题呢?
3 楼 luolonghao 2009-02-03  
不错!做跨浏览器开发肯定都会碰得到。

同样的strict mode下IE和Gecko系列浏览器表现不一样,尤其是上面提到的table td的font。
2 楼 esay 2009-02-03  
esay 写道

好文章,受益匪浅啊!以前碰到很多奇怪的问题,现在终于豁然开朗,谢谢你9527!

补充一下,第七点,确实如楼主所说。在quirks mode 中,table的css属性不会去继承父节点的,我试了一下style="font-size:30px; color:red; font-weight:bold;"都是如此,其它属性未没有验证,我的是IE7
1 楼 esay 2009-02-03  
好文章,受益匪浅啊!以前碰到很多奇怪的问题,现在终于豁然开朗,谢谢你9527!

相关推荐

    quirksmode

    浏览器 Quirksmode(怪异模式)与 CSS1compat 是一种浏览器渲染模式的概念,它们之间存在着一些区别和联系。Quirksmode 也称为 Compatibility Mode,是一种非标准的渲染模式,而 CSS1compat 则是标准的渲染模式,也...

    WebRebuild北京第一届交流会之2:《浏览器兼容性问题简介》——黄昊

    主要有两种模式:标准模式(Standards mode)和怪异模式(Quirks mode)。标准模式遵循W3C的规范,而怪异模式则是为了兼容早期的浏览器行为。浏览器根据页面顶部的DOCTYPE声明来决定使用哪种模式。DOCTYPE的缺失或不正确...

    网页 DOCTYPE html标签的作用1

    在标准模式下,浏览器会严格按照指定的规范来解析和显示页面,而在quirks mode下,浏览器可能会模仿早期版本的Internet Explorer的行为,以兼容那些不遵循标准的旧代码。 如果不写DOCTYPE或者写错DOCTYPE,浏览器...

    web前端浏览器兼容性问题和新知识.docx

    另一个重要的概念是怪异模式(Quirks Mode)。如果HTML文档没有正确的DTD(Document Type Declaration)声明,某些浏览器,如IE,会进入怪异模式,这可能导致页面布局严重偏离预期。因此,始终在文档开头添加DTD声明...

    2022年web前端最全面试题及答案【含vue-react】.docx

    strict mode是最严格的解析模式,quirks mode是兼容老版本浏览器的模式,almost standards mode是介于strict mode和quirks mode之间的模式。 3. HTML、XHTML、XML有什么区别? HTML(HyperText Markup Language)...

    DOCTYPE 标签

    使用正确的DOCTYPE标签对网页的呈现一致性至关重要,因为不同的DOCTYPE会导致浏览器采用不同的渲染模式,如 quirks mode(怪异模式)或 standards mode(标准模式)。在quirks mode下,浏览器会模拟旧版浏览器的行为...

    前端开发面试题集锦(一).docx

    - 严格模式和混杂模式(Quirks Mode)是浏览器解析HTML的两种不同方式。 - 不同的DOCTYPE声明会触发不同的浏览器模式。例如,HTML4.01 Strict或XHTML1.0 Strict会触发严格模式,而缺少DOCTYPE或旧版本的DOCTYPE...

    WEB前端面试题全套.doc

    不同的DOCTYPE会导致浏览器进入不同的渲染模式,如标准模式(Strict Mode)和混杂模式(Quirks Mode)。标准模式下,浏览器按照规范呈现页面,而在混杂模式中,浏览器会尝试兼容旧版浏览器的行为,这可能导致页面...

    html doctype 作用介绍

    有两种主要的渲染模式:BackCompat(也称为怪异模式或混杂模式)和CSS1Compat(标准兼容模式或严格模式)。在怪异模式下,浏览器倾向于模仿早期版本的IE浏览器行为,这可能导致CSS布局和JavaScript执行与现代标准不...

    div+css_兼容ie6_ie7_ie8_ie9和FireFox_Chrome等浏览器方法

    例如,在标准模式(strict mode)下,大多数现代浏览器能够正确解析CSS;而在怪异模式(quirks mode)下,则可能引发一些兼容性问题。因此,确保使用正确的DOCTYPE至关重要: ```html &lt;!DOCTYPE html&gt; ``` #### 2....

    2021前端字节跳动真题解析.pdf

    #### 语义化标签 ...例如,`&lt;header&gt;`用于页面或章节的头部信息,`&lt;footer&gt;`则是底部信息,`&lt;article&gt;`用于独立的文章内容,`...开发者在设计应用时应该注意到不同浏览器和模式下的存储行为差异,并进行相应的异常处理。

    为什么使用DOCTYPE HTML

    例如,IE6及其更早版本会始终处于怪异模式,而其他如Mozilla、Safari和Opera则具备两种模式。 DOCTYPE HTML的简洁形式,如`&lt;!DOCTYPE html&gt;`,自HTML5引入以来,已经成为推荐的标准。这个声明告诉浏览器页面遵循的...

    IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决

    IE浏览器在不同的DOCTYPE下会有不同的渲染模式,如Quirks Mode、 Transitional 和 Strict 模式。对于IE8,正确声明DOCTYPE可以避免许多兼容性问题,例如: ```html &lt;!DOCTYPE html&gt; ``` 二、使用条件注释 IE浏览器...

    浅谈CSS编程中的怪异模式

    怪异模式(也称为quirks mode)与标准模式(或称为严格模式)是浏览器用于解析HTML和CSS的两种不同的渲染模式。理解这两种模式的区别对于开发者来说至关重要,因为这直接关系到页面在不同浏览器中的表现。 首先,...

    面试宝典指南大全

    标准模式(Strict Mode)遵循HTML和CSS规范,而怪异模式(Quirks Mode)模拟旧版浏览器的渲染行为。 34. **行内元素与块级元素** 行内元素如、,块级元素如、。行内元素通常不支持设置宽高。 35. **CSS属性继承...

    被忽视的DOCTYPE说明分析

    浏览器根据DOCTYPE声明的有无以及具体内容,决定采用哪一种模式进行页面的渲染,主要分为标准模式(Standards Mode)和怪癖模式(Quirks Mode)。 2.1 多种模式的由来 在早期,不同的浏览器厂商为了争夺市场份额,...

    DOCTYPE元素详解 完整版

    quirks mode是当浏览器遇到不规范的DOCTYPE时的一种向后兼容模式,它以一种不太规范的方式来处理网页,尽量兼容旧的网页;standards mode则是浏览器用来展示遵循规范的网页的一种模式,网页元素的表现将符合规范文档...

    百度2015前端研发笔试卷及答案

    - **混杂模式(Quirks Mode):** 适用于非标准的或老版本的HTML文档,浏览器会尝试兼容这些不规范的代码。 ### 4. 自适应网页设计(Responsive Web Design) 为了使网站能够在不同设备上良好显示,自适应网页设计变...

    指定网页doctype解决CSS Hacking

    如果DOCTYPE未被正确声明或缺失,浏览器会进入怪异模式(quirks mode),在这种模式下,浏览器会尝试模拟早期浏览器的行为,导致对CSS和HTML的解析与标准模式有所不同。 CSS Hacking的产生是因为浏览器的不一致性,...

    网页制作基础 声明文档类型描述(DTD

    在标准模式下,浏览器按照W3C的标准来解析和显示内容,而在quirks mode下,浏览器可能模拟早期浏览器的行为,这可能会导致布局问题。 对于初学者或在兼容性需求较高的环境中,推荐使用Transitional DTD,因为它更...

Global site tag (gtag.js) - Google Analytics