Question

在我的测试中，我有2个跨度都设置为显示：内联块，边框可见。 Firefox在每个跨度之间渲染空间。甚至设置margin：0; padding：0;没有做任何事来解决这个问题。我设想内联span元素显示时的期望：inline-block是2个跨度互相渲染，就像你向左或向右浮动2个div一样。我发现的唯一“修复”是向空间添加浮动：向左或向右，但这违背了我最初尝试不使用浮动的目的。有什么想法吗？

<style>
    span{
        border:2px solid #000;

        display:inline-block;

        padding:0;
        margin:0;
    }
</style>
<span>Test</span>
<span>Test2</span>

Answer 1

它们将它们分开，因为它们之间有空格 - 换行符。

Answer 2

您还可以使用注释删除行之间的空白区域。

   <span>hou</span><!--
--><span>se#</span><!--
--><span>316</span><!-- outputs house#316 without spaces -->

没有评论丑陋（双关语），但有时候这是一种可以接受的方法，可以在正确显示时保持标记正确排列。

关闭主题但重要提示：在跨度上使用内联块时，打开框大小（-moz-box-sizing：border-box;等）通常非常有用，这使得边框和边框成为可能。从元素内部测量填充。这是使用内嵌块跨度百分比的唯一实用方法，可以节省许多相关的麻烦。

Answer 3

我不认为有一种方法可以在标记的多行上允许跨度而不让它们渲染空间？

不完全，但是：

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

Answer 4

Ryan Mitchell的解决方案对我来说效果很好。我最终得到了类似的东西：

.container { word-spacing: -1em; }
.container * { word-spacing: normal; }

Answer 5

不喜欢这个bug。您可能想要考虑的事情是将容器元素上的字间距设置为-1em。我自己刚遇到这个bug，所以我不确定它是否实用但会隐藏那个空间。

Answer 6

修复FF2.0 FireFox 2.0找到修复程序有点棘手，你不能在不影响浏览器新版本的情况下应用标准浏览器黑客攻击FireFox 2。你可以沿着JS路线走下去，但是这些类型的浏览器定位似乎是长篇大论而且有点松懈。解决此问题的最佳方法是使用“-moz-inline-stack”值作为“display”属性。

由于FireFox 2不支持内联块，但它支持Mozilla特定的显示属性'-moz-inline-stack'，它显示就像内联块一样。当我们在“display：inline-block”之前添加它时，FF2忽略“inline-block”声明并保持-moz-inline-stack。支持内联块的浏览器将使用它并忽略以前的显示属性。

以下是一个例子：

.itemname { display：-moz-inline-stack; display：inline-block; }

此答案直接来自http://www.soak.co.uk/blog/firefox-2-ie6-and-inline-block/

Answer 7

如果你正在渲染纯XHTML（很可能你不是这样，除非你将页面作为XML而不是HTML提供给用户，否则甚至不会设置doctype）然后它会显示为你所期望的。

但是由于上面提到的HTML / XHTML差异，它将被渲染为单个空格。

Firefox 3使用display：inline-block为spans添加间距

7 个答案: