我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在，因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以，在我的情况下，我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异，所以，我认为这是一个解决方案。

在元素之间添加注释以避免出现空白。对我来说，这比将字体大小重置为零然后再设置回来要容易得多。

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

所有用于显示的空间消除技术:内联块是讨厌的hack…

使用Flexbox

它很棒，解决了所有的内联块布局问题，截至2017年有98%的浏览器支持(如果你不关心旧的ie，更多)。

我们准备好使用Flexbox了吗? 使用CSS灵活的盒子- Web开发人员指南| MDN Flexbox | CSS-Tricks的完整指南 Flexy Boxes - CSS flexbox游乐场和代码生成工具

我发现了一个纯CSS解决方案，在所有浏览器中都很好地为我工作:

span {
    display: table-cell;
}

添加字母间距:4 px;在父CSS上添加letter-spacing:0px;到生成空间css。

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; vertical-align:底部; 字母间距:0 px; ｝ p { 字母间距:4 px; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >

如果你正在使用Twig模板引擎，你可以使用无空格:

<p>
    {% spaceless %}
    <span>Foo</span>
    <span>Bar</span>
    {% endspaceless %}
</p>

请注意，虽然这并没有解决所提出的确切问题，但如果有人有Twig，这可能是有用的，以避免使用一些较小的解决方案。