那些盒模型在IE6中的BUG们,工程狮的你可曾遇到过?
作者:网络转载 发布时间:[ 2015/6/1 14:13:41 ] 推荐标签:缺陷管理
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时,它负责对自己和可能的后代元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11