下面这幅图是我的blog页面使用mozilla浏览的时候的情况。
一塌糊涂吧，左边的导航栏覆盖住了右边的内容浏览区，还有一幅图片（我用来做border背景），漂浮在错误的位置上。
为什么会出现这样的问题呢？原因是ie浏览器对css box model的理解和mozilla的理解不一样，mozilla按照w3c推荐的css标准来创建css box model，ie浏览器对box model有一个错误的理解，ie浏览器的box model让成千上万的网页设计师、开发人员们学习了，并且一直错误的运用着（原来我也是其中一员）
著名的网页设计大师zeldman在他的著作《designing with web standards》用了一章重点的阐明了这个问题。
一个网页中，w3c的css中推荐使用一个盒来存放网页元素，一个标准的css定义的网页就是不同的盒子排列、嵌套组成的。
一个盒子的组成如下图：
css使用width和height来定义内容(content)区的宽度和高度
使用padding-top、padding-bottom、padding-left、padding-right定义填充(padding)区的上下左右的值。
使用border-top、border-bottom、border-left、border-right定义边界(border)的上下左右宽度。
使用margin-top、margin-bottom、margin-left、margin-right定义页边空白(margin)的上下左右的值。
但是ie浏览器却把width、height理解成为
width = 内容区宽度 + border-left + border-right + padding-left+ padding-right
height = 内容高度 + border-top + border-bottom + padding-top + padding-bottom
哈哈，你也是这么理解的吧，很多人都是这么认为的，或许是w3c在对width的定义的时候没有考虑过这个词的将引起的歧义。
jessey的这个网页有比较详细的文章。
http://jessey.net/simon/articles/003.html
当border和padding为0的时候这个box model工作正常，但是如果你定义了border和padding的话，正确理解box model的浏览器将会和不能正确理解box model发生冲突。
在我的blog中，左边导航是一个div#leftmenu，右边的是div#main，我对div#leftmenu的border和pandding做了定义，它只对ie做了解释，因此mozilla就不能够按照你的想法识别。
这个错误的box model理解直到ie6才被纠正过来，但是ie6为了保持向下兼容，并不是对所有网页都采用正确的box model计算方法。只有你的网页中加上完整的doctype的声明的时候，它才能够按照正确的方法建立box model。
为了使ie浏览器能够正确的使用css box model，tantek提供了一个box model hack方法，它能解决ie4/5.x错误box model，《designing with web standards》中也介绍过这个方法。
你可以通过http://www.tantek.com/css/examples/boxmodelhack.html访问到它。
它的方式是这样的，给一个div指定了下面的css声明
div.content{
width:400px;
voice-family:"\"}\"";
voice-family:inherit;
width:300px;
}
最后一个width的值是正确的css box的width，而第一个width是提供给ie4/5.x使用的css box宽度，因为ie4/5.x不能够识别中间两个声明，因此后面的所有定义就被放弃了。
ie6也能够识别voice-family，但它能够正确的理解box model，所以使用这种方法可以保证这些浏览器按照正确的box model进行计算。
在我打算使用它来解决ie的box model问题的时候，我发现我使用ie浏览器并不能按照我的想法工作。我找到了原因所在，因为我的ie6浏览器，还是采用了错误的box model计算方式，因为要按照正确的box model计算，网页必须加上严格的doctype的声明。
csdn所使用的这个.text blog系统产生的网页确实加上了doctype的声明，但是这个声明是残缺的。
它缺少对uri的描述，因此迫使ie6依旧采用向下兼容的错误box model计算方式。
这是一个不完整的doctype声明，如果你打算采用css box model解决box model问题，即使你的ie版本是6.0的也将使用错误的box model。
今天我终于找到了一个办法，能够代替box model hack方法，并且对ie6同样起作用。在介绍这种方法之前，首先看看我的blog的结构的css定义。
blog左边的导航是一个大的div#leftmenu，右边是div#main，两个div的css声明定义如下：
#leftmenu {
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: #645d64 35px solid;
padding-top: 60px;
padding-right: 4px;
padding-bottom: 30px;
padding-left: 4px;
width:200px;
}
#main {
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 200px;
}
/*上面两个id选择器的定义中有些不必要的属性我去掉了*/
我把#left的定义改为
#leftmenu {
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: #645d64 35px solid;
padding-top: 60px;
padding-right: 4px;
padding-bottom: 30px;
padding-left: 4px;
width:157px;
width:expression('200px');
}
expression这个样式定义是ie5之后都可以阅读的属性，但是只能为ie所识别，它能够动态执行一段脚本运算。识别标准box model的浏览器只能使用前面一个width定义，而ie浏览器使用了后面的width来创建box model。
现在它工作正常了。
如果你打算深入了解box model和css，下面的资源对你有帮助。
参考资源：
1、完整的盒式模型的描述请参考w3c的css2和css3《box model》
http://www.w3.org/tr/rec-css2/box.html
http://www.w3.org/tr/css3-box/
2、tantek提供的《box model hack》，它提供了解决ie5.x错误box model的解决方法
http://www.tantek.com/css/examples/boxmodelhack.html
3、jessey的网站上有ie box model和正确的box model对比
http://jessey.net/simon/articles/003.html
4、hedong的网站上有关于css box model的简单介绍《css2.0的box模型》
http://hedong.3322.org/newblog/archives/000063.html
5、w3c的css规范
《css1规范》 http://www.w3.org/tr/css1
