span display inline 在 safari 上根本不显示答案

【问题标题】：span display inline not displaying at all on safarispan display inline 在 safari 上根本不显示
【发布时间】：2021-12-11 15:16:46
【问题描述】：

所以我遇到了一个奇怪的问题，即使我使用浏览器的控制台并将元素悬停在 DOM 中以预览其尺寸，我的所有跨度 display : inline 都不会出现在 safari 上。盒子模型显示了这个

而 firefox 或 chrome 显示正确的尺寸

如果我将跨度显示更改为inline-block，所有内容都会按原样显示，但在这种特定情况下我不能使用这样的 css 规则，因为分词不再起作用，我正在为每个字母使用跨度我的横幅标题的动画用 js + css 所以我需要它是display : inline 这是在 firefox/chrome 上使用 display : inline 的结果

这里有inline-blockon firefox/chrome/safari

如您所见，使用inline-block 不是一种选择。

我还检查了整个网站的跨度，除非我添加 display : inline-block，否则它们都没有出现在 safari 上，因此它不是特定于我的横幅标题。我所有 span 中唯一常见的 CSS 就是这个

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

除了这两个 css 规则之外，它们中的大多数只是简单的跨度，有时 font-size 或 color 会发生变化。

编辑：

为了更好地表达我的意思，当我使用 Safari 的开发工具将 h1 元素悬停时会发生这种情况

在这里，当我使用display : inline 时，我将任何跨度悬停在该 h1 内

最后，当我在使用display : inline-block 时将跨度悬停在我的 h1 内时

编辑 2：经过数小时的搜索，问题似乎来自字体本身，当我使用另一个 Safari 显示我的 spans 元素时，仍然不知道如何解决这个问题，但万一它可能指向正确的人未来的方向我留下这个笔记

【问题讨论】：

什么意思不出现，当你检查它应该是边界出现的地方或者元素离开屏幕的地方？
去掉font-weight属性，看看文字是否再次出现，可能是字体没有500的粗细，没有fallback
更新了我的问题@teefars 我试图删除字体粗细规则，没有任何改变
元素似乎不在屏幕上，看起来像是定位问题，尝试将position:relative 设置为它们和/或父元素。你有任何指向我可以尝试检查的网站的链接吗？
它们都设置了相对位置，以及在动画中设置了从 1em 到 0 的顶部位置，这是链接 domaine-marguerite-carillon.catapulpe.fr，如果你在 safari 上，你会看到很多内容是缺少（例如导航链接）这些缺少的元素是带有 display 的跨度：inline too

标签： javascript html css safari

【解决方案1】：

如果它可能对面临同样问题的人有所帮助，我终于找到了问题，它直接来自字体文件，我再次将它们上传到我的服务器并且它工作了

【讨论】：