Upgrade to Pro — share decks privately, control downloads, hide ads and more …

有沟必火

 有沟必火

记录重构中的间隙问题

Avatar for time zhong

time zhong

July 05, 2013
Tweet

More Decks by time zhong

Other Decks in Technology

Transcript

  1. 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 >
  2. 图片底部间隙测试 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
  3. 行内元素 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。
  4. 块级元素 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。