有沟必火

记录重构中的间隙问题

Transcript

3. 分 形 几 何 学 ‚ ‛
5. 清除浮动的本质？ 触发 haslayout或BFC （除添加额外标签或内容的方法）
6. 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 7 x 15 x 8=840 >
7. 那些‚沟‛ • 图片底部间隙 • li底部间隙问题 • inline-block间隙 • 表单元素间隙 • IE6 ie3像素 bug • word-wrap:break-word 间隙
9. 图片底部间隙测试 Standards Mode Almost Standards Mode 有回车 无回车 无回车 无回车 chrome Y Y N N firefox Y Y N N IE6 Y N Y N IE7 Y N Y N IE8 Y Y Y Y IE9 Y Y Y Y IE10 Y Y N N
10. font-size: 0.837x height
11. li元素底部间隙测试 触发条件： （父元素：Width || height || zoom:1）&&子元素浮动 解决方法： Vertical-algin: ！=Normal || 0 || float:！=none
12. inline-block元素水平方向间隙 • 默认情况下，HTML处理方式是： 将所有连续的空格合并为一个空格，将回车符做一个空格处理。
13. SO • anonymous inline element • inline-replaced-element
14. 行内元素 display:inline-block ie6&ie7 ie8&ie9 Firefox Chrome Safari Opera font-size:0 N- Y Y Y N- Y word-spacing: 负值 Y（2） Y Y N N Y letter-spacing: 负值 N* Y Y Y Y N Y表示有效： Y1表示当某个值时会重叠， Y2表示永远不会重叠。 N表示无效： N-表示间隙减小但依然存在 N*表示当前的条件是子元素的letter-spacing也等于0。
15. 块级元素 display:inline-block ie6&ie7 ie8&ie9 Firefox Chrome Safari Opera font-size:0 Y Y Y Y N- Y word-spacing: 负值 Y（1） Y（1） Y（1） N N Y（1） letter-spacing: 负值 Y（1） Y（1） Y（1） Y（2） Y（2） N Y表示有效： Y1表示当某个值时会重叠， Y2表示永远不会重叠。 N表示无效： N-表示间隙减小但依然存在 N*表示当前的条件是子元素的letter-spacing也等于0。
16. IE6 3像素 恒定的，与字体大小和回车符都无关,有特殊例外。
17. word-wrap:break-word 间隙 浏览器：IE6&IE7 条件：inline-block&&回车符 表现：间隙与字体有关
18. 有 X 必火
19. 现象只是入门的向导，一进了门就要抓住事物的本质。
20. Thank You!