标准模式和怪异模式

标准模式(strict mode)和怪异模式(quirks mode),说的是  浏览器  对网页  的渲染模式

1、浏览器在渲染网页时,怎么会有标准模式和怪异模式呢?
在HTML与CSS的标准化未完成之前,各个浏览器厂商对于HTML和CSS的解析有各自不同的实现,而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后,浏览器厂商一方面要按照标准去实现对HTML与CSS的支持,另一方面又要保证对非标准的旧网页设计的向后兼容。
因此,现代的浏览器一般都有两种渲染模式:标准模式和怪异模式。
在标准模式下,浏览器按照HTML与CSS标准对文档进行解析和渲染;
而在怪异模式下,浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。
这样的话,对于旧有的网页,浏览器启动怪异模式,就能够使得旧网页正常显示;
对于新的网页,则可以启动标准模式,使得新网页能够使用HTML与CSS的标准特性。

 
2、浏览器怎么知道在什么时候  使用哪种渲染模式,渲染网页呢?
我们在制作网页时一般都会有
DOCTYPE来声明文档类型,
浏览器遇到正确的DOCTYPE声明时,就会启动标准模式,安装制定的文档类型标准,解析和渲染网页;
浏览器遇到未做DOCTYPE声明的网页时,或者DOCTYPE声明不正确时,浏览器会认为这是一个旧网页(即制作网页时,网页标准还未制定),浏览器就会启用怪异模式,解析和渲染网页


3、标准模式和怪异模式有啥区别?
a、对盒模型的计算上有不同:标准盒模型的宽高等于内容区即content的宽高,不包含边框border和填充padding;而IE6之前的浏览器计算盒模型宽高时,是包括边框border和填充padding的。
b、行内元素的垂直对齐不同:标准模式下图片是基线对齐;怪异模式下,图片对齐在底部。

4、怎么设置怪异模式呢?

方法一:声明DOCTYPE 为 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
方法二:不声明DOCTYPE

5、怎么设置标准模式呢?
声明DOCTYPE文档类型
HTML4

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
以上三个任选其一

XHTML1.0

a、过渡型(Transitional )
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
b、严格型(Strict )
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
c、框架型(Frameset )
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
以上三个任选其一
 
6、怎么判断当前是标准模式还是怪异模式呢?
方法一:执行以下代码
alert(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式
 
方法二:jquery为我们提供的方法,如下:
alert($.boxModel)
alert($.support.boxModel)




对于有doctype声明的网页,什么浏览器采用哪种模式解析,可参考:http://hsivonen.iki.fi/doctype


本文参考
https://blog.csdn.net/hjxgood/article/details/45915389
https://www.jianshu.com/p/dcab7cde8c04
如涉及版权,请联系QQ894492015