css经典布局图

其实在CSS的世界里是很好玩的,特别是前端人员,想在IE上展示什么就整什么出来,但有一个非常纠结的问题就是IE跟不上,因为有一个万恶的IE6在,让你各种蛋痛的事发生。所以要清楚在IE和非IE的浏览器的区别,下面是一张经典的布局图。

标准的盒子

IE下的盒子

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

IE的盒子模型后来修复掉了,在标准模式下是表现w3c盒子模型的,在quirks模式下表现自己的盒子模型。

如果在IE6盒子模型下,设定BODY的padding哪么剩余的高度被主体部分继承,就符合我们的预期了

(当然css3中有box-sizing可以改变盒子的模型,从这方面看IE6的盒子模型,是符合逻辑的。连w3c都做了兼容吸收)

那现在就是怎么触发IE6的quirks的问题了。

未经允许不得转载:面包頭 » css经典布局图

赞 (0)
分享到:更多 ()

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 唯尔标志很有意思,谢谢!回复