css-IE的怪异盒子和标准盒模型

发表于 | 分类于

前言

今天了解到了IE6以及以下版本的一些兼容性问题。一般情况下，盒子模型分为标准 w3c 盒子模型、IE 盒子模型，以及css3中的 伸缩盒模型。

  • 我们一般理解的盒子模型是标准盒子模型

    标准盒模型（w3c 盒子模型）

    CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式，其模型图如下：

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

1
2
3
4
* {
  margin: 0;
  padding: 0;
}
  • 在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

怪异盒模型（IE 盒子模型）

相较于标准盒模型，IE盒模型最大的不同在于：

  • IE 盒子模型的 content 部分包含了 border 和 padding 这两个属性。

    实例对比

    例如一个盒子模型如下：
    1
    margin:20px; border:10px; padding:10px; width:200px; height:50px;

    1.使用w3c盒子模型解释：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    盒子模型占用的大小为：
    宽度：20x2+10x2+10x2+200=280px;
    高度：20x2+10x2+20x2+50=130px;

    盒子的实际大小为：
    宽度：10x2+10x2+200=240px;
    高度：10x2+20x2+50=90px;

    盒子内容的大小为：
    宽度：200px;
    高度：50px;

    2.使用IE盒子模型解释：

    1
    2
    3
    4
    5
    6
    7
    盒子模型占用的大小为：
    宽度：20x2+200=240px;
    高度：20x2+50=90px;

    盒子的实际大小为：
    宽度：200px;
    高度：50px;
    结果大致如下：

    改进方法

    在IE6中，可以通过DTD声明解决这个问题。IE5及以下，经过测试不可以。
    1
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">