那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？

HTML5学堂 那些盒模型在IE6中的BUG们，工程狮的你可曾遇到过？

IE6已经渐渐的开始退出浏览器的历史舞台。虽然当年IE6作为微软的一款利器击败网景，但之后也因为版本的持续不更新而被火狐和谷歌三分天下。可谓成在IE6，亦败在IE6啊~

说到前端开发，不得不说，在所有前端工程师的心中，IE6是曾经永远的痛~

在这里，小编总结罗列了一下IE6的问题，跟大家分享一下。今天就先从盒模型入手啦~

盒模型基本概念

盒模型指css布局中html中的每个元素在浏览器中的解析都可以被看作一个盒子，拥有盒子一样的外形和平面空间。完整的盒模型是由内容区(含width和height)、border(边框)、padding(内边距)、margin(外边距)这四部分属性组成。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

盒模型的IE6兼容问题

1、怪异解析

不同的文档有不同的解析模式，正常的解析是我们最为常见的，而对于IE6存在着怪异解析。详情请点击：IE6怪异解析

2、横向双倍边距

如果你觉得横向双倍边距，就是所有元素的一侧（左或右）的外边距变成双倍，那你就太“轻敌”了。横向双倍边距，和浮动、元素类型以及是否接触父级都有关系。在开发当中，通常人们会考虑如何规避这类问题。一起来看：IE6横向双倍边距bug吧~

3、底部外边距失效

你没有看错，不是纵向外边距叠加，而是底部外边距失效。纵向外边距叠加是每个浏览器都会出现的问题，所以不在我们今天讨论的范畴之内，但是元素底部的外边距失效，这个实在是比较特殊——浮动元素margin-bottom失效。一起来看吧~！

关于IE6的bug根源，在于haslayout。

hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的后代元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

感兴趣的朋友可以查看这篇文章：hasLayout IE浏览器bug的来源。