博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器的两种模式quirks mode 和strict mode
阅读量:6124 次
发布时间:2019-06-21

本文共 2450 字,大约阅读时间需要 8 分钟。

在看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

 

转载于:https://www.cnblogs.com/jenry/archive/2013/01/05/2846530.html

你可能感兴趣的文章
Java 学习路线建议
查看>>
[自学AndroidStudio系列]第二篇章:高速上手AS小技巧其一
查看>>
Hibernate HQL的使用
查看>>
机器学习十大常用算法小结
查看>>
Jenkins 忘记admin密码拯救方法
查看>>
windows安装go-sqlite3失败,提示找不到gcc
查看>>
linux(十四)之linux NFS服务管理
查看>>
一脸懵逼学习oracle(图形化界面操作---》PLSQL图形化界面)
查看>>
同理心是通往成功架构的桥梁
查看>>
vuex在页面中以对象展开运算符形式引入报错解决
查看>>
spring aop切面编程实现操作日志步骤
查看>>
VS2013生成XP独立运行程序
查看>>
spring+jidi读取property的配置文件
查看>>
关于C++ const 的全面总结
查看>>
PHP中__get()和__set()的用法实例详解
查看>>
Centos7下Yum安装PHP5.5,5.6,7.0
查看>>
spring3: 4.4 使用路径通配符加载Resource
查看>>
ubuntu 安装SSH并设置免密码登录
查看>>
[Oracle维护工程师手记]两表结合的MVIEW的告诉刷新
查看>>
LeetCode: Integer to Roman 解题报告
查看>>