Strict和Quirk模式下的差异

Strict和Quirk模式下的差异。



要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。

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

<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP,最专业的PHP社区</h3>
    </body>
</html>

如果你的网页代码不含有任何声明,那么浏览器就会采用怪异模式解析,便是如果你的网页代码含有DTD声明,浏览器就会按你所声明的标准解析。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP,最专业的PHP社区</h3>
    </body>
</html>

上面的代码,浏览器会按HTML 4.01的标准进行解析。

到底标准模式和怪异模式有什么不同呢?在我之前的文章《IE到底认不认识!important声明》中已经说过,标准模式中

IE6不认识!important声明,IE7、IE8、Firefox、Chrome等浏览器认识;而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种,还有很多其它区别。所以,要想写出跨浏览器的CSS,你必须采用标准模式。好像太绝对了,呵呵。好吧,要想写出跨浏览器CSS,你最好采用标准模式。

到底都有哪些声明呢?哪种声明更好呢?我们建议你使用XHTML 1.0最严格模式,从一开始我们就应该严格的要求自己。

具体声明如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- 如果你接手的是一个遗留网页,最初并没有DTD声明,并且使用了很多在XHTML中已经废除的标签,那么,我们建议你使用XHTML兼容模式,声明如下: -->

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

Quirk和Strict模式的区别:

盒子模型渲染模式的不同

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

使用document.compatMode 可显示为什么模式

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

在strict mode中,

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

在quirks mode中,

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

时间: 2024-11-11 17:23:19

Strict和Quirk模式下的差异的相关文章

不同JS环境use strict对重复属性处理的差异

昨天改一个Bug不小心属性名重复了,引出了一个很有意思的小Bug.导致Bug产生的是一段JS对象声明的代码,其结构与如下代码等价. var fn = function() { 'use strict'; var obj = { a: 1, a: 2 // 因为声明的属性比较多,后面添加的属性不小心与已有的属性重复了 }; return obj }; fn(); 当时自己在PC的chrome中测试了程序,运行没问题,也在安卓机上做了测试,也没问题.但在iphone中却报错了,导致页面无法正常渲染.

不同JS环境use strict对反复属性处理的差异

昨天改一个Bug不小心属性名反复了,引出了一个非常有意思的小Bug.导致Bug产生的是一段JS对象声明的代码.其结构与例如以下代码等价. var fn = function() { 'use strict'; var obj = { a: 1, a: 2 // 由于声明的属性比較多,后面加入的属性不小心与已有的属性反复了 }; return obj }; fn(); 当时自己在PC的chrome中測试了程序,执行没问题.也在安卓机上做了測试.也没问题.但在iphone中却报错了,导致页面无法正常

浅析WPF中MVVM模式下命令与委托的关系

??各位朋友大家好,我是Payne,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com.最近因为项目上的原因开始接触WPF,或许这样一个在现在来讲显得过时的东西,我猜大家不会有兴趣去了解,可是你不会明白对某些保守的项目来讲,安全性比先进性更为重要,所以当你发现银行这类机构还在使用各种"复古"的软件系统的时候,你应该相信这类东西的确有它们存在的意义.与此同时,你会更加深刻地明白一个道理:技术是否先进性和其流行程度本身并无直接联系.由此我们可以推论出:一项不流行

flex与相对定位在国内双核浏览器极速模式下的兼容性问题

---恢复内容开始--- 览器兼容性问题是前端的一个重要部分. 在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器.双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式.兼容模式时使用IE内核,极速模式采用webkit内核.而目前大部分网站为了性能和用户体验,默认使用极速模式.在极速模式出现问题时,使用兼容模式. 虽然极速模式是使用的webkit内核,但是浏览器的表现却还是有一定差异.平时使用Chrome调试,在极速模式下却表现的不正常. 好,进入正题

解决简单恢复模式下产生的日志增长

简介 最近测试服务器进行数据归档,其间程序员发现一个问题,空间不足,我查看原因发现日志文件暴涨.然后将数据库改为简单恢复模式,但是依然存在这个问题.经过查询资料发现了日志文件在简单模式下依然增加的原因. Simple概念 Simple恢复模式也叫做”Checkpoint with truncate log“,其实这个名字更形象,在Simple模式下,SQL Server会在每次checkpoint或backup之后自动截断log,也就是丢弃所有的闲置日志记录,仅保留用于实例启动时自动发生的ins

解决部分在Debug模式下程序没问题但是Release模式下出现问题的方法

编译策略介绍 关于优化级别:GCC_OPTIMIZATION_LEVEL 描述如下 None: Do not optimize.  [-O0]With this setting, the compiler's goal is to reduce the cost of compilation and to make debugging produce the expected results. Statements are independent: if you stop the program

工作在服务器模式下的rsync的安装、配置与使用22

rsync命令可以用于在本地系统中复制文件(如同cp命令),也可以在本地和远程主机之间复制文件(如同scp命令),还可以工作在服务器模式下(使用功能上类似FTP.SAMBA等).本文主要介绍rsync在服务器模式下的配置和应用举例. rsync命令常用选项 -n: 仅做执行测试,不做实际动作 -v, --verbose: 输出详细执行信息 -q, --quiet: 静默模式 -c, --checksum: 开启校验功能,强制对文件传输进行校验 -r, --recursive:递归复制 -a, -

浅谈SQL Server中的事务日志(四)----在完整恢复模式下日志的角色

浅谈SQL Server中的事务日志(四)----在完整恢复模式下日志的角色 本篇文章是系列文章中的第四篇,也是最后一篇,本篇文章需要前三篇的文章知识作为基础,前三篇的文章地址如下: 浅谈SQL Server中的事务日志(一)----事务日志的物理和逻辑构架 浅谈SQL Server中的事务日志(二)----事务日志在修改数据时的角色 浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色 简介 生产环境下的数据是如果可以写在资产负债表上的话,我想这个资产所占的数额一定不会

浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色

浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色 本篇文章是系列文章中的第三篇,前两篇的地址如下: 浅谈SQL Server中的事务日志(一)----事务日志的物理和逻辑构架 浅谈SQL Server中的事务日志(二)----事务日志在修改数据时的角色 简介 在简单恢复模式下,日志文件的作用仅仅是保证了SQL Server事务的ACID属性.并不承担具体的恢复数据的角色.正如”简单”这个词的字面意思一样,数据的备份和恢复仅仅是依赖于手动备份和恢复.在开始文章之前,首先