上代码:
dib-wrap { font-size:0;/* 所有浏览器 */ *word-spacing:-1px;/* IE6、7 */ } .dib-wrap .dib{ font-size: 12px; letter-spacing: normal; word-spacing: normal; vertical-align:top; } @media screen and (-webkit-min-device-pixel-ratio:0){ /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */ .dib-wrap{ letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/ } } .dib { display: inline-block; *display:inline; *zoom:1; }
其实在 YUI 3 中也全面运用了 inline-block 作为基础布局,YUI 3 是这样解决的:
.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 */ } .yui3-u { display: inline-block; zoom: 1; *display: inline; /* IE < 8: fake inline-block */ letter-spacing: normal; word-spacing: normal; vertical-align: top; }
显然,这里纯粹使用了 letter-spacing 和 word-spacing 来控制元素间的空隙,局限性极大,-0.31em 和 -0.43em 只是因为 YUI 3 全局 cssfonts.css 里设置是:「body { font:13px/1.231 arial,helvetica,clean,sans-serif; }」。