错误的盒式模型和一个解决办法

最新推荐文章于 2024-06-14 10:49:14 发布

smile2me27

最新推荐文章于 2024-06-14 10:49:14 发布

阅读量1.5k

点赞数

分类专栏： Web Standard 文章标签： css mozilla 浏览器 ie standards border

本文链接：https://blog.csdn.net/smile2me27/article/details/42447

版权

Web Standard 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下面这幅图是我的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。