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

发表于:2015-6-01 11:33

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:HTML5学堂    来源:51Testing软件测试网采编

  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软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号