您当前的位置:首页 > 计算机 > 软件应用 > 浏览器应用

浏览器的标准模式和怪异模式

时间:08-01来源:作者:点击数:

现代的浏览器一般都有两种渲染模式: 标准模式(Standards mode)和怪异模式(Quirks mode)

标准模式下, 浏览器按照 HTML 与 CSS 标准对文档进行解析和渲染; 而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。

为什么要做如此区分?

在 HTML 与 CSS 的标准化未完成之前, 各个浏览器对 HTML 和 CSS 的解析有各自不同的实现, 而有很多旧的网页都是按照这些非标准的实现去设计的。

在 HTML 与 CSS 标准确定之后,浏览器一方面要按照标准去实现对 HTML 与 CSS 的支持,另一方面又要保证对非标准的旧网页设计的后向兼容性。

因此, 现代的浏览器一般会支持两种渲染模式: 标准模式和怪异模式。

浏览器如何确定使用哪种渲染模式

如果 HTML 文件首部包含文档类型声明 DOCTYPE, 那么浏览器就会启动标准模式, 按照指定的文档类型标准解析和渲染文档

对于没有文档类型声明或者文档类型声明不正确的文档,浏览器就会认为它是一个旧的HTML文档,就会使用怪异模式解析和渲染该文档

<!DOCTYPE html> 是所有可用的 DOCTYPE 之中最简单的,而且是 HTML5 所推荐的

判断当前浏览器采用的渲染模式

JavaScript 中, document.compatMode 是用来判断当前浏览器采用的渲染方式

document.compatMode 的值为 CSS1Compat(标准模式) 或 BackCompat(怪异模式)

let mode = document.compatMode;
if (mode == 'BackCompat') {
	console.log('当前浏览器正在使用怪异模式渲染当前页面');
}
if (mode == 'CSS1Compat') {
	console.log('当前浏览器正在使用标准模式渲染当前页面');
}

参考mdn: https://developer.mozilla.org/zh-CN/docs/Web/API/Document/compatMode

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐