现在浏览器的模式（IE11、firefox69）

最新推荐文章于 2022-06-03 19:11:37 发布

￡五年

最新推荐文章于 2022-06-03 19:11:37 发布

阅读量281

点赞数

分类专栏：浏览器兼容文章标签：怪异模式和标准模式

本文链接：https://blog.csdn.net/weixin_39499923/article/details/102457965

版权

浏览器兼容专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于浏览器模式的一些理解

今天在看面试题的时候，看到浏览器模式的一些知识，自己测试了一下发现和网络上的知识有些出入，写下来共同讨论一下：

先讲一下什么是Quirks模式（怪异模式）和Standards模式（标准模式）：

主要讲IE浏览器，firefox和chrome浏览器基本没啥问题，
在IE6之前（IE5及以下）浏览器对CSS的支持很差，IE6之后对CSS提供了更好的支持，但因为很多页面都是基于旧的布局方式写的，
如果在IE6下运行这些旧布局的页面，会使得页面显示不正常（大家又不可能为了兼容新版本重新写一套代码，想想吧，浏览器更新一次版本我们重构一次代码，多可怕。），所以IE6提供了Quirks模式（怪异模式）。

什么是Quirks模式？
我们在写代码的时候，如果要兼容新功能，一般不太会去重写那个功能，而是添加新的参数，如果那个参数存在，则采用新功能，IE6它就是采用这种手段。
它将DTD当成 ‘ 参数 ’ ，如果检查到你写了DTD(因为以前大家都不会写DTD),就认为你想要更好的CSS支持，就意味着页面将采用对CSS支持更好的布局，如果没有写DTD，就采用兼容之前布局的模式，这就是Quirks模式。

指定某个DTD参数（就写一条，还有更多，可以参考 https://blog.csdn.net/hjxgood/article/details/45915389）

PS:
**HTML5 为什么只需要写 <!DOCTYPE HTML>？ **
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

什么是Standards模式
通俗说法，Standards模式下，浏览器按W3C标准解析执行代码。

两个模式的区别
怪异模式和标准模式的区别（IE 6 、7下，也就是IE5Quirks 下才有这些区别）：

总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。（IE盒子模式）
设置行内元素的高宽：在 Standards 模式下，给等行内元素设置 wdith 和 height 都不会生效，而在 quirks 模式下，则会生效。
设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 quirks 模式下却会失效。

但是经过自己的测试，在IE11和火狐69下，使用怪异模式也无上面的区别，效果如图：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
		.div1{
			border: 50px solid red;
			width: 100px;
			height: 100px;
		}
		</style>
	</head>
	<body>
		<div class="div1">12</div>
		<script async defer>
		alert(window.top.document.compatMode)
		</script>
	</body>
</html>

在这里插入图片描述 PS:
JS代码检验目前在哪个模式下
alert(window.top.document.compatMode) ;
//BackCompat 表示怪异模式
//CSS1Compat 表示标准模式

我们再添加一行代码，改变一下盒子模型：

box-sizing: border-box;\\换成IE盒子

PS:

box-sizing: border-box;\\切换IE盒子
box-sizing: content-box;\\切换W3C标准盒子

显示如下图：
在这里插入图片描述
这就很纳闷了。网上的知识都说Quirks模式下border包含在content内吗？
为什么测试了一下发现怪异模式下还是用标准盒子的渲染方式?
所以我去查了一下，发现这句话

如果我们将 IE 升级到最新的 IE10 就会发现 IE10 除了拥有 IE7/8/9/10 Standards Mode 四种
Standards Mode，同样还有拥有了两种 Quirks Mode：IE5 Quirks 和 IE10 Quirks。随着 IE10
发布而产生的这个新的怪异模式 IE10 Quirks 被认为是一种更好的支持了 HTML5 规范的 Quirks Mode。我们可以发现针对
HTML5 规范而设计的页面（如含有、、等标签）在 IE5Quirks
下是不能正确显示的，但是在 IE10 Quirks 下完全可以正确显示。也就是说，IE10 Quirks 是为了在那些针对 HTML5
设计，但是又没有添加 doctype(可以决定浏览器工作在哪种模式下，后面会详细讨论)的页面而存在的。

也就是说，怪异模式其实也分多种，有IE5Quirks、和IE10Quirks等，我们现在的浏览器版本比较高，即使是在怪异模式下，高版本浏览器也是采用IE10Quirks，所以我们看到的渲染效果也不是我们想象的那样（IE盒子模式）
如果你真的想要去试试你想要的效果，去下载个IE7测试吧。
总得来说，IE6、IE7等采用IE5Quirks，这时候会出现IE盒子现象，IE10后版本，采用IE10Quirk,不会出现IE盒子现象。

PS:IE可以切换兼容模式，点击工具-兼容性视图。

￡五年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
现在浏览器的模式（IE11、firefox69）

关于浏览器模式的一些理解今天在看面试题的时候，看到浏览器模式的一些知识，自己测试了一下发现和网络上的知识有些出入，写下来共同讨论一下：先讲一下什么是Quirks模式（怪异模式）和Standards模式（标准模式）：主要讲IE浏览器，firefox和chrome浏览器基本没啥问题，在IE6之前（IE5及以下）浏览器对CSS的支持很差，IE6之后对CSS提供了更好的支持，但因为很多页面都是基于...
复制链接

扫一扫