為什么絕對定位的跨度不能正確地定位在Firefox中相對定位的跨度中，除非顯示為內聯塊或類似內容？

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>

其他瀏覽器可以處理。

這是小提琴

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中的空格。

區別在於，內聯塊元素在其開始和結尾都擺脫了空格（根據white-space屬性），但內聯元素卻沒有。

假設此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>