为什么绝对定位的跨度在 Firefox 中的相对定位的跨度中不能正确定位，除非显示为 inline-block 等？

Question

我想知道为什么以下代码不能在 FF 中正确呈现，除非我将父级 span 显示为 inline-block 等。如果您在检查器中检查绝对定位跨度的布局，它将在右侧显示数字 184 而不是 197。一旦我们将display:inline-block 添加到父跨度，它就可以正常工作了。

<span style="position:relative; font-size:52px;">FOO BAR
  <span style="position:absolute; top:-17px; right:197px; height:22px; width:22px; background-color:black"></span>
</span>

<span style="position:relative; font-size:52px; display:inline-block">FOO BAR
  <span style="position:absolute; top:-17px; right:197px; height:22px; width:22px; background-color:black"></span>
</span>

其他浏览器可以处理。

Here is the fiddle

Answer 1

嗯，这是错误。正在计算相对框的宽度，包括末尾的空间。但是根据 CSS 空白规则，行尾的空格（它是）应该被丢弃。 您可以看到这一点，因为如果您手动删除空格 - 即使用

<span style="position:relative; font-size:52px;">FOO BAR<span 
  style="position:absolute; top:-17px; right:197px; height:22px; 
  width:22px; background-color:black"></span></span> 

与其他浏览器类似，该框将放置在 FF 中。

见http://jsfiddle.net/fg9enk2t/1/

---

_{奇怪的是，这个末端空间规则会导致各种各样的问题。我在 Chrome 和 IE 中都看到了在行尾丢弃空格时出现的错误。}

Answer 2

问题是html中的空格。

不同之处在于，inline-block 元素在其开头和结尾去除了空格（根据white-space 属性），但 inline 元素没有。

假设这个 CSS：

.outer {
    position:relative;
    font-size:52px;
    outline: 1px solid;
}
.inner {
    position:absolute;
    top:-17px;
    right:0px;
    height:22px;
    width:22px;
    background-color:black;
}
.ib {
    display: inline-block;
}

然后，以下内容将看起来相同 (Demo)：

<span class="outer ib">FOO BAR<span class="inner"></span></span>

<span class="outer">FOO BAR<span class="inner"></span></span>

但是，以下内容看起来会有所不同 (Demo)：

<span class="outer ib">FOO BAR
    <span class="inner"></span>
</span>

<span class="outer">FOO BAR
    <span class="inner"></span>
</span>