当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式(Standards Mode)和怪异模式(Quirks Mode)。
触发标准模式如下:
1、加DOCTYPE声明,比如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
2、设置X-UA-Compatible触发。
怪异模式触发如下:
1、无doctype声明、定义旧的HTML版本(HTML4以下,例如3.2)
2、加XML声明,可在ie6下触发
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE ...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释,可在ie7下触发 <?xml version="1.0" encoding="utf-8"?>
<!-- keep IE7 in quirks mode -->
<!DOCTYPE ...>
5、<!--->放在<!DOCTYPE前面
怪异模式和标准模式最显著的差别是在IE(IE5.5的怪异模式,其他浏览器无论是怪异模式还是标准模式,它们都是W3C标准)盒子模型上,下图为怪异模式上的盒子模型:
- IE的盒子宽度和长度需要算上边框宽度和内边距
width=boarder_left+boarder_right+padding_left+padding_right+content_width;
- 而标准模式下的盒子宽度和高度等于内容的宽度和高度。
width=content_width;
CSS3的box-sizing属性可以定义使用哪种盒子模型。
怪异模式和标准模式的差别还有某些内联元素的垂直对齐基准和表格字体元素的继承问题。