前端小记

# 标准模式与混杂模式

# 何时处于混杂模式

  1. 不写<!DOCTYPE html>
  2. <!DOCTYPE html>前面加上xml声明 <?xml version="1.0" encoding="utf-8"?> (IE6)
  3. <!DOCTYPE html>和<?xml version="1.0" encoding="utf-8"?>之间加了（标签、文本、注释）(ie8以下都有，ie9以上未测)
  4. <!DOCTYPE html>前面有（标签、文本、注释）(ie8以下都有，ie9以上未测)

# 混杂模式带来的影响

# 盒模型的解析

  • 混杂模式下会按照IE5.5的盒模型解析。
  • 而标准模式是按标准的盒模型解析

# 图片和单元格底部空白

当一个块元素div中包含的内容只有图片时，在标准模式下，不管IE还是标准，在图片底部都有3像素的空白。但在混杂模式下，标准浏览器（Chrome）中div距图片底部默认没有空白

# 字体样式

在混杂模式下，表格中的字体不会继承它祖先元素（比如body，比如包含table的div）的字体样式

# inline元素

在IE的混杂模式下，给inline元素设置高宽都有效

← Topic →