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">