代码间距的由来和解决方法
先来个简约版的，抛弃了那些老古董之后
抛弃ie6-7,ie8(Q),safari 5.x，先用font-size:0;清除掉间距，再给子元素恢复字体大小，并且恢复默认间距vertical-align:top;不是必须的
.yui-g {
font-size:0;
}
.yui-u {
display: inline-block;
font-size: 12px;
letter-spacing: normal;
vertical-align:top;
}
基于yui3的改版，抛弃了ie6~7
.yui3-g { letter-spacing: -0.31em; word-spacing: -0.43em; } .yui3-u { display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; }
YUI3 原版 兼顾了ie6~8以及safari
YUI 3.5.1 (build 22)
.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;
}
飘准解析，block和inline元素，设置样式为display：inline-block之后兄弟元素间会有一定量的代码间距，默认大约3~6px之间
默认为inline的元素也是会有这个代码间距的，最简单粗暴的解决方法：ugly.js这样的代码压缩插件。
由来：space,tab,form feed, return feed等等各种折行空格会产生代码间距，这个间距的大小由该元素继承到的font-size大小计算而来，一般是为父元素基础字体宽的一般，比如body { font-size: 12px;} 那么这个间距有可能就是5px或者4px等等，不同的浏览器解析会有所不同
HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是 受 font-size 来控制的，字体大小直接导致 inline 或者 inline-block 后元素之间空隙的大小，把 inline-block 元素间的空隙认为总是某个固定大小是错误的。
方法：设置父元素font-size: 0;整个世界都清净了，然后给子元素恢复字体大小就好了，然而safari 5.0 ago 这是什么鬼，我不懂，所以还得为其加上一句 letter-space: -5px;
使用 font-size:0经测试发现，.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;/*for ie 6-7 1px*/
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; /*for ie 6-7 or ie8(Q) */
*zoom:1; /*for ie 6-7 or ie8(Q) */
}
淘宝原版
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}
可以缩写为
[;letter-spacing:-5px;]合并么？
.dib-wrap {
font-size:0;/* 所有浏览器 */
[;letter-spacing:-5px;]
*word-spacing:-1px;/* IE6、7 */
}
参考来源http://ued.taobao.org/blog/2012/08/inline-block/#comment-246109