Css 无法在Firefox中垂直对齐跨距的innerHTML

在Firefox上垂直居中放置spans的内部文本时，我遇到了一个问题

下面是firefox开发工具的屏幕截图，突出显示了span元素

这在Chrome和Safari上可以正常工作

去布鲁克林

.info选项卡{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
框大小：边框框；
背景色：#e5e8ea；
填充：2%4%4%4%；
边缘底部：8px；
光标：指针；
身高：100%；
最大高度：计算（16.67%-6px）；
过渡：0.25s最大高度缓进缓出；
&：最后一个孩子{
页边距底部：0；
}
.info选项卡标题{
显示器：flex；
弯曲方向：行；
调整项目：灵活启动；
字体系列：“BrownStd常规”；
字体大小：16px；
字体大小：粗体；
字母间距：0.35px；
线高：16px；
最小高度：26px！重要；
对齐项目：居中；
@媒体#{$mobilebreak}{
字体大小：14px；
}
.选项卡图标{
保证金权利：2.5%；
身高：100%；
宽度：自动；
}
}
}

理想情况下，文本将在跨度内垂直居中

这不是重复的，建议的答案都是针对对齐父元素中的两个元素。这指的是一个浏览器特定的问题，即对齐跨距的innerHTML内容。

如果“跨距的innerHTML内容”指的是文本的边界框，我认为在CSS中处理该问题的唯一方法是通过

行高

，并且不能更改文本在其行高内的对齐方式

---

在这种情况下，我会尝试将行高降低到文本的精确高度，然后在父级上对齐项目：居中

你做得很好。BrownStd的字体度量导致此问题。从符号基线到字体内容区域底部的距离大于到顶部的距离。 如果没有一些技巧，例如负边距或绝对定位，您不确定是否可以完全对齐文本和图标。 你可以读一下，这很难理解

按钮{
显示：内联flex；
对齐项目：居中；
填充：10px；
高度：50px；
边框：1px实心；
}
div{
右边距：10px；
宽度：25px；
高度：25px；
背景色：红色；
边界半径：50%；
}
跨度{
背景颜色：蓝色；
字体系列：无衬线；
颜色：白色；
}

漂亮的字体- 很好的垂直对齐

---

但是如果这是字体的问题，为什么问题只存在于某些浏览器上？@SpencerFink我认为浏览器有不同的字体渲染算法。Win10、最新Edge、FF和Chrome-不完美对齐。