Firefox 3 使用 display:inline-block 为 span 添加间距答案

【问题标题】：Firefox 3 adds spacing to spans with display:inline-blockFirefox 3 使用 display:inline-block 为 span 添加间距
【发布时间】：2010-10-01 06:35:31
【问题描述】：

在我的测试中，我有 2 个跨度都设置为 display:inline-block，带有可见性边框。 Firefox 在每个跨度之间呈现空间。甚至设置 margin:0;padding:0;没有做任何事情来解决这个问题。在将内联 span 元素设置为 display:inline-block 时，我的期望是 2 个 span 彼此齐平呈现，就好像您向左或向右浮动了 2 个 div。我发现的唯一“修复”是将 float:left 或 right 添加到跨度中，但这违背了我试图根本不使用浮点数的最初目的。有什么想法吗？

<style>
span{
    border:2px solid #000;
    display:inline-block;
    padding:0;
    margin:0;
}
</style>
<span>Test</span>
<span>Test2</span>

【问题讨论】：

标签： css firefox

【解决方案1】：

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

【讨论】：

@bombe 是的，所以我想在帮助网站上提问对我来说真的很愚蠢。是的，应该知道的。那么，你是用 SO 买机票还是邮购番茄酱呢？
你可以在这里点番茄酱吗？
我遇到了完全相同的问题，第一个内联项目有额外的填充。谢谢，这个解决方案确实很棒！

【解决方案2】：

您也可以使用 cmets 去除行间的空白。

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

没有关于丑陋的 cmets（双关语），但有时这是一种可接受的方式，可以在保持标记正确排列的同时仍能正确显示。

离题但重要：在跨度上使用 inline-block 时，打开 box-sizing (-moz-box-sizing: border-box; etc) 通常非常有用，它可以测量边框和填充元素内部。这是在行内块跨度中使用百分比的唯一实用方法，并且可以省去许多相关的麻烦。

【讨论】：

评论是一个巧妙的技巧 - 对我有用。在使用诸如循环之类的模板逻辑时很有帮助......并且诱人的系统会留下讨厌的空白（我正在使用 Liquid）。

【解决方案3】：

我认为没有办法允许标记中的多行跨度而不让它们呈现空间？

不完全是，但是：

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

【讨论】：

【解决方案4】：

Ryan Mitchell 的解决方案对我来说效果很好。我最终得到了这样的结果：

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

【讨论】：

【解决方案5】：

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

【讨论】：

这不是错误，而是一项功能。 Inline-block 在外部表现为“内联”元素。如果空格被删除，那么当您在段落中放置 <a href="..."> 时，它会“吸”左边和右边的空格。
是的，这很公平，这不是错误。当时就这么觉得。现在最大的问题是尝试关闭该空间时浏览器之间的不一致。最安全的选择是手动关闭空白区域，真的很痛苦。

【解决方案6】：

修复 FF2.0 FireFox 2.0 的修复有点棘手，您无法在不影响新版本浏览器的情况下应用标准浏览器 hack 来定位 FireFox 2。你可以走 JS 路线，但这些类型的浏览器定位似乎很啰嗦，而且有点古怪。解决此问题的最佳方法是为“display”属性使用“-moz-inline-stack”值。

由于 FireFox 2 不支持 inline-block，但它支持 Mozilla 特定的显示属性“-moz-inline-stack”，它的显示方式与 inline-block 一样。当我们在“display:inline-block”之前添加它时，FF2 会忽略“inline-block”声明并保留 -moz-inline-stack。支持 inline-block 的浏览器会使用它并忽略之前的显示属性。

这是一个例子：

.itemname { 显示：-moz-inline-stack；显示：内联块； }

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

【讨论】：

欢迎来到 SO。现在，请不要拿别人的作品当自己的。始终需要注明出处。

【解决方案7】：

如果您正在渲染纯 XHTML（很可能您不是，即使设置 doctype 也不会，除非您将页面作为 XML，而不是 HTML 提供给用户），那么它将按您的预期显示。

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

【讨论】：