浏览器怪异模型和标准模型的区别

Moxmi 发布于2019-08-02 11:13 / 805人阅读

摘要：从开始，引入了模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。这就是模式怪癖模式，诡异模式，怪异模式。

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

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

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD（文档类型定义）当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定

DTD是为英文*Document Type Definition，中文意思为“文档类定义”。

如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

他们的区别：

在严格模式中：给元素设置的宽度 = content;在怪癖模式中：给元素设置的宽度 = content+padding+border

可以设置行内元素的高宽

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

quirk模式下设置图片的padding会失效

quirk模式下Table中的字体属性不能继承上层的设置

quirk模式下white-space:pre会失效

云服务器 GPU云服务器的对象模型云模型的计算人工智能的模型 hbase的数据模型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52842.html

浏览器怪异模型和标准模型的区别

摘要：从开始，引入了模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。这就是模式怪癖模式，诡异模式，怪异模式。从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，...

CoyPan 2019-08-29 16:23 评论0 收藏0
《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？

摘要：背景想想自己为什么要写这个，难道不是因为这篇道基础面试题附答案文章最近被转载的多，比较多而凑热闹蹭热点显然，肯定是因为这样我才打算写的。继承得到的样式的优先级最低。背景想想自己为什么要写这个，难道不是因为这篇《50道CSS基础面试题（附答案）》文章最近被转载的多，比较多而凑热闹蹭热点？显然，肯定是因为这样我才打算写的。而且还有就是，我的公众号也很久没有更新了，微信说长期不更新会关掉...

DataPipeline 2019-08-30 14:11 评论0 收藏0
标准盒模型、怪异盒模型对比与应用

摘要：百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度左右左右左右在怪异模式下，一个块的总宽度左右既已经包含了和值然后再介绍一下新属性那么，到底这两个公式里提到的总宽度是什么意思呢两种模式最终效果有什么差别呢话不多说，上代码先看标准百度标准盒模型，所有的介绍都是在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)在怪异模式下...

keithxiaoy 2019-08-29 12:59 评论0 收藏0
前端工作面试HTML相关问题

摘要：前端工作面试相关问题文档类型的作用是什么在中有两个主要目的。而当元素的内容只有图片时，如的单元格。在下，单元格中的图片的属性默认为，因此，在图片底部会有几像素的空间。所以百分比的高度必须在父元素有声明高度时使用。关闭窗口后，即被销毁。前端工作面试HTML相关问题 Q: doctype（文档类型）的作用是什么？ A: 在HTML中 doctype 有两个主要目的。对文档进...

iamyoung001 2019-08-01 14:40 评论0 收藏0
前端面试（知识点）整理（一）

摘要：接受个参数事件类型，是否冒泡，是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件，但是只有当满足一定匹配条件时才会被挪。一、页面布局 1.问题：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。解决方案一：使用浮动布局` Document ...

zhichangterry 2019-08-22 11:06 评论0 收藏0