跨度顯示內聯在 safari 上根本不顯示

Question

所以我有一個奇怪的問題，我的所有display : inline跨度display : inline只是沒有出現在 safari 上，即使我使用瀏覽器的控制台並將元素懸停在 DOM 中以獲取其維度的預覽沒有出現任何內容並且框模型顯示這個

而 firefox 或 chrome 顯示正確的尺寸

如果我將 span 顯示更改為inline-block一切都按原樣顯示，但在這種特定情況下我不能使用這樣的 css 規則，因為 word break 不再起作用，我為橫幅的每個字母使用了 span使用 js + css 為其設置動畫的標題，因此我需要將其display : inline這是display : inline的結果display : inline在 firefox/chrome 上display : inline

在這里使用 firefox/chrome/safari 上的inline-block

因此，正如您所看到的，使用inline-block不是一種選擇。

此外，我檢查了我的整個網站的跨度，除非我添加display : inline-block所以它不是特定於我的橫幅標題，否則它們都沒有出現在 safari 中。 我所有跨度唯一通用的 css 就是這個

    span {
font-weight : 500;
line-height : 3rem;
/* 1rem = 10px in this case */
}

除了這兩個 css 規則之外，它們中的大多數只是簡單的跨度，有時會更改font-size或color 。

編輯 ：

為了更好地說明我的意思，當我使用 Safari 的開發工具將 h1 元素懸停時會發生什么

在這里，當我在使用display : inline時將任何跨度懸停在 h1 內時display : inline

最后，當我在使用display : inline-block時將一個跨度懸停在我的 h1 內時display : inline-block

編輯 2 ：經過數小時的搜索，問題似乎出自字體本身，當我使用另一個 Safari 顯示我的 spans 元素時，仍然不知道如何解決該問題，但以防萬一它可能指向正確的方向未來我要留下這張紙條

Answer 1

如果它可以幫助面臨同樣問題的人，我終於找到了問題，它直接來自字體文件，我再次將它們上傳到我的服務器並且它起作用了