`

Quirks模式与Standards模式

 
阅读更多

如何进入Standards模式?

一般来讲浏览器是通过DTD来判断模式的;浏览器进入Standards模式的DTD有:HTML的strict.dtd和loose.dtd这两个DTD的简单区别是

  • strict去掉了许多表现的标签,有利于结构和表现的分离
  • loose会导致Firefox进入Almost Standards模式,在图片的处理上会有微小的差别

在IE6下,如果在DTD之前有任何字符都将导致其进入quirks模式

Quirks模式与Standards模式的区别

quirks和standards的区别很多都可以归为IE5和IE6的区别。

盒模型的高宽包含内补丁和边框
在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks模式下,IE的宽度和高度还包含了padding和border。IE5.5及以下的浏览器即使在Standards模式下,也会有这个问题
可以设置行内元素的高宽
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
可设置百分比的高度
在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的
用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效,quirk模式下的解决办法,用text-align属性:
body{text-align:center};#{content:text-align:left}
设置图片的padding会失效
Table中的字体属性不能继承上层的设置
white-space: pre会失效
许多CSS默认样式将不同
在Standards模式下,给span等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效
JavaScript中的区别
Quirks mode的Table of measurements

参考

dom中的document有一个属性叫compatMode,其返回值是BackCompat和CSS1Compat,分别对应quirks mode和strict mode

void function(){
var mode=document.compat
if (mode="BackCompat")
alert("当前以quirks mode的方式渲染页面");
else if(mode="CSS1Compat")
alert("当前已strict mode的方式渲染页面");
else alert("浏览器版本不支持compatMode");
}()
分享到:
评论

相关推荐

    前端面试宝典

    ##### Quirks模式与Standards模式的区别 - **Quirks模式:** 从IE6开始引入,用于兼容旧版页面。当浏览器检测到没有Doctype声明或者某些特定的非标准Doctype时,会进入Quirks模式。 - **特点:** 在这种模式下,...

    深入浅出之前端面试经

    DOCTYPE>`的作用及其重要性,再到Quirks模式与Standards模式的区别,以及`div+css`布局相较于`table`布局的优势等,旨在帮助求职者更好地理解和掌握前端技术的基础知识点。 #### 浏览器内核简介 - **IE**: 使用**...

    面试宝典 .docx

    3. **Quirks模式与Standards模式**:Quirks模式允许浏览器模仿早期的错误解析方式,而Standards模式遵循W3C标准,提供更一致的跨浏览器渲染效果。 4. **div+css布局的优势**:相比table布局,div+css布局更加灵活,...

    附件二(面试宝典)1

    3. Quirks模式与Standards模式:Quirks模式是浏览器以早期HTML版本的解析方式渲染页面,而Standards模式则遵循最新标准,两种模式下CSS和JavaScript的行为有所不同,开发者通常希望页面在Standards模式下运行。...

    名企前端面试真题质量的代码,讨论影响代码质量的3个要素(规范性、完整性和鲁棒性),强调高质量代码除完成基本功能外,还能考虑特殊情

    面试中,面试官可能会通过提问HTML和CSS的基础知识,如浏览器内核、DOCTYPE的作用、Quirks模式和Standards模式的区别,以及div+css布局与table布局的优劣等,来评估候选人的基础知识和实际经验。此外,对于`<img>`的...

    前端面试基础题汇总-500题

    3. **Quirks模式与Standards模式**:Quirks模式允许浏览器以早期版本的方式解析页面,可能导致非标准的行为;而Standards模式遵循最新的W3C标准,提供更一致的渲染。 4. **div+css布局与table布局**:div+css布局...

    前端vue面试题大全汇总

    3. **Quirks模式与Standards模式**:Quirks模式是浏览器按照早期的非标准规则解析页面,Standards模式则遵循W3C标准。两者主要区别在于布局、样式和脚本执行的差异,Standards模式更利于实现跨浏览器的一致性。 4. ...

    面试题整理进阶版.pdf

    文档中还提到了Quirks模式与Standards模式的区别,这是前端开发者在调试老版本IE浏览器时常遇到的问题。Quirks模式是为了兼容老的网页设计而采用的较为宽松的渲染模式,它不完全遵循标准模式下CSS的规范。而...

    BAT及各大互联网公司2014前端笔试面试题:HTML

    3. **Quirks模式与Standards模式**: - **Quirks模式**:旧版浏览器(如IE5)为了兼容旧页面的布局方式,当DTD(文档类型定义)缺失时,浏览器会采用的一种非标准渲染模式。 - **Standards模式**:从IE6开始,...

    前端面试题汇总.pdf

    3. **Quirks模式与Standards模式**:Quirks模式下,浏览器按照早期的非正式标准渲染页面,而Standards模式则遵循现代Web标准,这两种模式下元素的布局和样式表现不同。 4. **div+css布局与table布局**:div+css布局...

    Web前端面试题,包括HTM、CSS、JavaScript等相关题

    - **Quirks模式与Standards模式**:Quirks模式遵循早期浏览器的非标准行为,而Standards模式则遵循W3C标准,提供更一致的渲染。 - **Div+CSS布局**:相比Table布局,提供更好的灵活性、可维护性和SEO优化。 - **...

    面试宝典 v2-新增Vue和React.pdf

    3. Quirks模式与Standards模式:Quirks模式模拟老版本IE浏览器的行为,而Standards模式遵循最新的W3C标准,两者在渲染和行为上存在差异。 4. div+css布局优于table布局:div+css更灵活,可维护性更强,有利于SEO,...

    前端大厂面试题汇总(1)(1).pdf

    Quirks模式与Standards模式的区别在于它们使用不同的排版和渲染规则,Quirks模式模拟老浏览器的行为,而Standards模式遵守官方标准。 布局方面,div+css的布局相比table布局更加灵活,易于维护,且对搜索引擎友好,...

    2022最全前端面试题汇总

    3. Quirks模式与Standards模式:Quirks模式是浏览器对早期HTML规范不一致的兼容方式,Standards模式遵循现代W3C标准,两者在渲染和行为上存在差异。 4. div+css布局与table布局:div+css布局更灵活,有利于SEO,可...

    2019年前端面试宝典

    Doctype声明能够决定页面在何种模式下被渲染,Quirks模式与Standards模式的主要区别在于文档的渲染行为,Quirks模式更兼容旧版的网页,而Standards模式更符合标准。 布局技术在前端开发中占据重要位置,传统的table...

    前端面试题,包含HTML,css,js

    3. **Quirks模式与Standards模式**:Quirks模式是浏览器按照旧的、非标准的方式渲染页面,而Standards模式遵循W3C的HTML和CSS标准,提供更一致的渲染效果。 4. **div+css布局与table布局**:div+css布局更灵活,...

Global site tag (gtag.js) - Google Analytics