在标准模式页面按照HTML,CSS
的定义渲染,而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C
标准而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式,如果存在一个完整的DOCTYPE
则浏览器将会采用标准模式,如果缺失就会采用怪异模式。下面介绍标准模式和怪异模式之间的区别
(1 )盒模型:
在怪异模式下,盒模型为IE盒模型,
而在W3C标准的盒模型中为
(2)图片元素的垂直对齐方式:
对于inline
元素和table-cell
元素,标准模式下vertical-align
属性默认取值为baseline
,在怪异模式下,table
单元格中的图片的vertical-align
属性默认取值为bottom
,因此在图片底部会有及像素的空间。
(3)<table>
元素中的字体:
CSS中,对于font
的属性都是可以继承的,怪异模式下,对于table
元素,字体的某些元素将不会从body等其他封装元素中继承得到,特别是font-size属性。
(4)内联元素的尺寸:
标准模式下,non-replaced inline
元素无法自定义大小,怪异模式下,定义这些元素的width,height属性可以影响这些元素显示的尺寸。
(5)元素的百分比高度:
a:CSS中对于元素的百分比高度规定如下:百分比为元素包含块的高度,不可为负值,如果包含块的高度没有显示给出,该值等同于auto,所以百分比的高度必须在父元素有高度声明的情况下使用。
b:当一个元素使用百分比高度时,标准模式下,高度取决于内容变化,怪异模式下,百分比高度被正确应用。
(6)元素溢出的处理:
标准模式下,overflow
取默认值visible
,在怪异模式下,该溢出会被当做扩展box
来对待,即元素的大小由其内容决定,溢出不会裁减,元素框自动调整,包含溢出内容。
浏览器标准模式和怪异模式之间的区别是什么?
1、浏览器的标准模式和怪异模式究竟是什么?标准模式:是浏览器按照W3C标准解析执行代码,这样用规定的语法去渲染,就可以兼容各个浏览器,保证以正确的形式展示网页。怪异模式:是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。
2、为什么还要存在怪异模式呢?在HTML
与CSS
的标准化未完成之前,各个浏览器都有自己的解析,而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML
与CSS
标准确定之后,浏览器一方面要按照标准去实现对HTML
与CSS
的支持,另一方面又要保证对非标准的旧网页的兼容。
3、浏览器如何确定用那种渲染模式?如果你的页面添加了(注意:大小写不敏感),那么就等同于开启了标准模式。如果省略了,浏览器会采用不符合某些标准的渲染模式。
4.标准模式和怪异模式常见的区别是什么?盒模型的处理差异:
1、标准模式:总宽度=width+margin(左右)+padding(左右)+border(左右)
2、怪异模式:总宽度=width+margin(左右)(width直接包括了padding(左右)+border(左右) )