堂主 - WEB前端开发

专注于互联网 | WEB前端开发 | 以用户为中心的体验 | 家是圆心 | Code is art !

博文列表

IE浏览器和CSS盒模型

0 comments

原文地址:http://www.456bereastreet.com/archive/200612/
internet_explorer_and_the_css_box_model/

堂主在翻译这篇文章的时候,IE5.*/Win在国内的使用率已经不足0.1%了(详情可见CNZZ的浏览器统计数据)。即使这篇文章主要讲的问题是针对IE5.*/Win的,但从(1)对浏览器兼容性历史的回顾角度;(2)从对堂主翻译的提到了这篇文章的《为视频创建固定比率》的丰富补充角度;以及(3)更是从文章里体现的“多角度、分优劣”来思考解决浏览器兼容性的意识启发角度,我都认为在今天依旧翻译这篇文章是值得的。

/*---------------------------- 分割线 -------------------------------*/

IE浏览器和更符合WEB标准的现代浏览器之间的差别在CSS盒模型这个问题上为很多前端初学者制造了不少的麻烦。因为盒模型是浏览器用来计算元素总宽度和高度的保证,所以就不难理解为什么当浏览器计算出不同结果时人们会如此的迷惑和丧气。

尽管CSS盒模型是如何工作的已经在其他非常多的场合上被一次次的解释和说明,我却依然会经常在讨论会和邮件交流列表上看到关于这个问题的提问,也会不期的偶遇到一些在不复合标准的浏览器(IE)环境中开发出来的站点。这也就是为什么我会写这篇文章的原因,同时很大程度上这篇文章也算做是较早的时候给瑞典杂志《CAP&Design》写的另一篇文章的翻译。

如果你已经了解了CSS盒模型在兼容性上的差异以及如何处理IE浏览器的问题,那就请飘过——这里要谈的没任何新的东西。如果你对为什么IE和其他浏览器会显示出不同大小的盒子一无所知,那就继续阅读吧。

CSS盒模型图解

下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示。

box-model.gif

在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding和border属性上。