display:inline-block换行，float不换行

CSS

有个任务，屏幕宽375px ，3个DIV宽125px，照理说3个DIV设置为display：inline-block的话，3个DIV会在一排，但是实际上第三个DIV却换行了；与之相反，3个div设置为float：left,则会在一排而不换行。所以肯定是这个display：inline-block有问题。经过查询，的确如此，block元素之间，写代码时的换行，是一个空格，所以虽然肉眼看不到，但是实际上是有空格字符串占了位置。
在完整的展示兼容性的像素级的inline-block元素列表布局前，有必要讲讲使用display:inline-block列表布局经常会遇到的“换行符/空格间隙问题”。

如果inline-block元素间有空格或是换行产生了间隙，那是正常的，应该的。如果没有空格与间隙才是不正常的（IE6/7 block水平元素）。真正的inline-block元素，就像个图片一样。形成的两个图片之间就会有间隙。要让这些空格不出现，最简单的最容易理解的就是让列表的结束标签与下一个列表的开始标签连在一起，就像是：

<li>
<span>...</span>
</li><li>
<span>...</span>
</li>

但是，这种做法好傻啊，而且HTML代码的可读性很不好。尤其考虑到现实情况：后台人员可能不清楚标签换行对样式的影响，直接后台repeat的时候，换行了。所以，此方法顶多临时应付些小打小闹的地方，要想广泛使用，显然业余了。

其实，我们只要细细想想，空格符本质上就是个字符，与a,b,c,d这些字符是个同一个属性的东西，只是他是空格，透明的看不见而已（但可以选中）。所以，只要我们使用让文字宽度为0的那些方法，不就可以解决inline-block元素间换行符间隙的问题啦！

于是，很自然而然的，想到了以下样式：

.target { font-size: 0; }