/ inline-block

YUI 3 Grids

YUI 3的grids使用了inline-block,不过在实际使用中要注意两个小问题:

  1. IE6/7下划线对不齐bug
  2. 间隙问题,YUI是这么写的
.yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}

这个数值跟字体有关,之前总结过

不过每次都跟字体来调有些麻烦,写为-.5em或者更大就可以一劳永逸了

.yui3-g {
    letter-spacing: -.5em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -.5em; /* IE < 8 && gecko: collapse white-space between units */
}

——- 2013-4-26 更新 ——-
因最新版的 Chrome 已经支持 font-size:0,故可以用 font-size:0 来去除间距