再回首重构 仲金龙(麦时) 20120426
TRANSCRIPT
Topic
• 批判式思维-（IE6双边距）
• 还原本质-（图片垂直居中）
• 总结归纳-（清除浮动，hasLayout,BFC,）
• 一般bug46个
• 与haslayout有关的5个
• 因属性不支持的6个
• 导致页面崩溃的1个
IE bug 数据
数据杢源：http://haslayout.net/css/
我们可能对IE6双边距的认识
• 在同方向设置margin和float值，将导致边距双倍
• 对同方向对块级元素上设置margin和float值，将导致边距双倍
A B C20 150 150
A B C40 160 150
IE6:
如果：一个块级元素向左/右浮动，且其设置的左/右边距大于其至容器的左侧内边界的距离
那么：该元素实际的左边距 = 设置的左边距 * 2 - 左边界至容器的距离，
否则：该元素实际的左边距 = 设置的左边距
A B C40 160 150
• 文本设置height和line-height，且两者相等，某些浏览器无法垂直居中
类似问题
Img是一个什么元素？
Painful egg下部（ descender ）
基线（baseline）
行内盒子（line box）
pic
一种常见的垂直居中方法
为何是0.873？
在ie6&ie7下，对文字设置font-size
可否设置与父级height相等的line-height实现垂直居中？
line-height方法测试结果
• 标准模式下， 图片前后有回车符，仅IE6不行；
• 标准模式下， 图片前后无回车符， IE6&IE7不行；
• 接近标准模式 下，图片前后有回车符，仅IE7可以；
• 接近标准模式下， 图片前后无回车符，都不可以；
• 在两种模式下，2张图片并排放置，且其中1张的高度等于
父级容器高度，不管前后有无回车，全都可以。
用伪类实现图片垂直居中
Img是一个什么元素？
类似问题
• li是个什么元素？
关于浮动
•为什么要清楚浮动？
•清楚浮动的方法有哪些？
•这些方法的本质是什么？
本质在于触収hasLayout和BFC
（除添加额外标签或内容的方法）
hasLayout与BFC
Haslayout 块级格式化环境 （Blocking format context）
针对的浏览器 Win IE5.5/6/7 IE8+/FF/CH/SA..
触収条件 • float不为none
•display: inline-block
•position: absolute
•height: (除 auto 外任何值)
•width: (除 auto 外任何值)
•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
•float不为none
•display:设为‘inline-block’，‚table-cell‛或为
"table-caption"
•position为absolute或fixed
•overflow不为visible
‚外围容器用float清除内部元素浮动的本质在于：float触収了BFC‛
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
‚hasLayout 和BFC的渲染模式很相近，例如：可以清楚浮动等‛
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/
缺失反斜杠‚\‛
如果父级元素设置height且overflow:hidden
是否是必须的？
• 两者采用不用的渲染引擎，且IE mac符合标准。
• IE mac上无hasLayout的概念
• IE win中设置width，height触収haslayout的方法对Iemac有不利影响
http://www.satzansatz.de/cssd/onhavinglayout.html
• 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
系统：win7/xp/mac
编码：utf-8/gb-2312
浏览器模式：标准模式/接近标准模式
浏览器类型：IE6(XP)/IE7/IE8/IE9/Chrome18.0.1025.152 m/Safari 4.05/Opera11.62
BFC阻值外边距叠加
margin-top:10px
margin-top:10px
margin-top:10px
margin-top:10px
margin-top:10px
margin-bottom:10px
margin-top:10px
margin-bottom:10px
我要感谢的
参考资料
• 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