从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6 支持CSS则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢?

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,我们就使用新功能,而如果这个参数 不为真时,就使用旧功能,这样就能不破坏原有的程序,又提供新功能。IE6也是类似这样做的,它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。

区别:

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。

设置行内元素的高宽:在Standards模式下,给<span>等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是看文章看的,甚至完全不知道。)

转载于:https://blog.51cto.com/12864747/1958880

爱创课堂每日一题第二天8/24日 Quirks模式是什么?它和Standards模式有什么区别?...相关推荐

  1. 爱创课堂每日一题第二十九天- ES6的了解?

    新增模板字符串(为JavaScript提供了简单的字符串插值功能).箭头函数(操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs.).for-of(用来遍历数 ...

  2. 爱创课堂每日一题第二十三天- Expires和Cache-Control?

    Expires要求客户端和服务端的时钟严格同步.HTTP1.1引入Cache-Control来克服Expires头的限制.如果max-age和Expires同时出现,则max-age有更高的优先级. ...

  3. 爱创课堂每日一题八十九天- CSS中link和@import的区别是:

    Link属于html标签,而@import是CSS中提供的br/>在页面加载的时候,link会同时被加载,而@import引用的CSS会在页面加载完成后才会加载引用的CSS @import只有在 ...

  4. 爱创课堂每日一题第五十二天- js延迟加载的方式有哪些?

    defer和async.动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack).按需异步载入js call() 和 apply() 的区别和作用? 作用:动态改变某个类的某 ...

  5. 爱创课堂每日一题101天-哪些操作会造成内存泄漏?

    内存泄漏指任何对象在您不再拥有或需要它之后仍然存在. 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量.如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环 ...

  6. 爱创课堂每日一题第四十天- 说说你对语义化的理解?

    1,去掉或者丢失样式的时候能够让页面呈现出清晰的结构 2,有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重: 3,方便其他设备解析(如屏 ...

  7. 爱创课堂每日一题-Javascript垃圾回收方法?

    标记清除(markand sweep) 这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为"进入环境",当变量离开 ...

  8. 爱创课堂每日一题-你做的页面在哪些流览器测试过?

    1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 答: IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto内核,O ...

  9. 爱创课堂每日一题第五十六天-对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?...

    前端是最贴近用户的程序员,比后端.数据库.产品经理.运营.安全都近. 1.实现界面交互 2.提升用户体验 3.有了Node.js,前端可以实现服务端的一些事情 前端是最贴近用户的程序员,前端的能力就是 ...

最新文章

  1. 只需3分钟,就能轻松创建 一个SpreadJS的React项目
  2. 干货丨8种用Python实现线性回归的方法
  3. 消息中间件客户端消费控制实践
  4. Loadrunner 8.1 下载
  5. 【学习随手记】POSIX消息队列执行报Permission denied的问题。
  6. listrecord根据某个属性去重_去哪网开发实战记录(9):城市选择页(中)
  7. 代码中有个get是啥意思_是时候秀一波了,甩掉get和set,Lombok让代码更简洁
  8. go redis 清空所有值_【大厂面试】面试官看了赞不绝口的Redis笔记二
  9. [LeetCode]Plus One
  10. Ubuntu——“系统无法检测到Intel的核心显卡”的调试笔记~
  11. 设计模式之禅之设计模式-状态模式
  12. 黑客都是使用哪些方法入侵我们电脑的
  13. 计算机组成原理----Cache主存地址映射(计算题)
  14. OSChina 周一乱弹 ——我后悔让爸妈用微信了!
  15. Hibernate入门教程
  16. 安卓网络测试工具_【网速】最佳手机网速测试工具
  17. 2021年电工(技师)考试内容及电工(技师)复审考试
  18. 使用NVivo完善定性编码的艺术
  19. 干眼能从事计算机工作吗,上班族长时间面对电脑须谨慎干眼症
  20. (二)基于区块链的自动抽奖系统从0到1实现

热门文章

  1. GDCM:gdcm::ImageChangeTransferSyntax的测试程序
  2. Boost:以协程的方式实现带有单个默认值的echo服务器的实例
  3. ITK:在灰度图像中标记连接的组件
  4. VTK:PolyData之ContoursToSurface
  5. VTK:图表之SideBySideGraphs
  6. OpenCV运行分类深度学习网络的实例(附完整代码)
  7. C语言DP备忘计算指数N的斐波那契级数的算法(附完整源码)
  8. OpenGL rimlight边缘照明的实例
  9. C++继承体系下的对象构造
  10. 04_关于元数据,ResultSetMetaData对象以及API方法介绍