2. Topic
• 批判式思维-（IE6双边距）
• 还原本质-（图片垂直居中）
• 总结归纳-（清除浮动，hasLayout,BFC,）

4. IE bug 数据
• 一般bug46个
• 与haslayout有关的5个
• 因属性不支持的6个
• 导致页面崩溃的1个
数据杢源：http://haslayout.net/css/

5. 我们可能对IE6双边距的认识
• 在同方向设置margin和float值，将导致边距双倍
• 对同方向对块级元素上设置margin和float值，将导致边
距双倍

6. 20 A 150 B 150 C
IE6:
40 A 160 B 150 C

7. 如果：一个块级元素向左/右浮动，且其设置的左/右边距大于其至容器的左侧内
边界的距离
那么：该元素实际的左边距 = 设置的左边距 * 2 - 左边界至容器的距离，
否则：该元素实际的左边距 = 设置的左边距
40 A 160 B 150 C

8. 类似问题
• 文本设置height和line-height，且两者相等，某些浏览器无法垂直居中

10. Img是一个什么元素？

11. 行内盒子（line box）
pic
Painful egg
基线（baseline）
下部（ descender ）

12. 一种常见的垂直居中方法

13. 为何是0.873？

14. 在ie6&ie7下，对文字设置font-size

15. 可否设置与父级height相等的line-height实现垂直居中？

16. line-height方法测试结果
• 标准模式下， 图片前后有回车符，仅IE6不行；
• 标准模式下， 图片前后无回车符， IE6&IE7不行；
• 接近标准模式 下，图片前后有回车符，仅IE7可以；
• 接近标准模式下， 图片前后无回车符，都不可以；
• 在两种模式下，2张图片并排放置，且其中1张的高度等于
父级容器高度，不管前后有无回车，全都可以。

17. 用伪类实现图片垂直居中

18. Img是一个什么元素？

19. 类似问题
• li是个什么元素？

21. 关于浮动
•为什么要清楚浮动？
•清楚浮动的方法有哪些？
•这些方法的本质是什么？

22. 本质在于触収hasLayout和BFC
（除添加额外标签或内容的方法）

23. hasLayout与BFC
Haslayout 块级格式化环境 （Blocking format context）
针对的浏览器 Win IE5.5/6/7 IE8+/FF/CH/SA..
触収条件 • float不为none •float不为none
•display: inline-block •display:设为‘inline-block’，‚table-cell‛或为
•position: absolute "table-caption"
•height: (除 auto 外任何值) •position为absolute或fixed
•width: (除 auto 外任何值) •overflow不为visible
•writing-mode(与父级相反)
•zoom: (除 normal 外任意值)
Ie7:
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

24. ‚外围容器用float清除内部元素浮动的本质在于：float触収了BFC‛
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

25. ‚hasLayout 和BFC的渲染模式很相近，例如：可以清楚浮动等‛
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

26. 是否是必须的？
缺失反斜杠‚‛
如果父级元素设置height且overflow:hidden

27. • 两者采用不用的渲染引擎，且IE mac符合标准。
• IE mac上无hasLayout的概念
• IE win中设置width，height触収haslayout的方法对Ie
mac有不利影响
http://www.satzansatz.de/cssd/onhavinglayout.html

28. • 1997年,苹果电脑和微软同意将IE for Mac成为Mac OS的默认
浏览器。
• 2003年，苹果电脑开収自己 的浏览器Safari
• 2003年6月13日，微软宣布终止开収Internet Explorer for
Mac。
• 2005年12月31日，微软终止对IE for Mac的支援，
• 2006年1月31日，微软不再提供IE for Mac下载，其地位被
Safari取代。
http://zh.wikipedia.org/wiki/Internet_Explorer_for_Mac

29. 系统：win7/xp/mac
编码：utf-8/gb-2312
浏览器模式：标准模式/接近标准模式
浏览器类型：IE6(XP)/IE7/IE8/IE9/Chrome18.0.1025.152 m/Safari 4.05/Opera11.62

30. BFC阻值外边距叠加
margin-top:10px
margin-top:10px
margin-top:10px
margin-top:10px
margin-bottom:10px margin-bottom:10px
margin-top:10px
margin-top:10px

31. 我要感谢的

32. Q&A
Thank You!
仲金龙
mail:timezhong@gmail.com
blog:www.wheattime.com

33. 参考资料
• http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html
• http://perishablepress.com/new-clearfix-hack/comment-page-1/#comments
• http://w3help.org/zh-cn/kb/010/
• http://w3help.org/zh-cn/causes/RX1001
• http://www.wheattime.com/images-tables-and-mysterious-gaps.html
• http://drupal.org/node/444228
• http://www.positioniseverything.net/easyclearing.html
• http://zh.wikipedia.org/wiki/Internet_Explorer_for_Mac#.E7.8D.A8.E6.9C.89.E7.89.B9.E6.
80.A7