Safari上的CSS文本对齐问题

文本在Chrome中正确对齐，但在Safari中，文本会弄乱其位置并接触到容器顶部（文本容器）

铬：

狩猎：

正如您在Safari中所看到的，文本容器（span）有其适当的大小，但其中的文本接触到了屋顶。我尝试过通过弄乱高度、线条高度、位置等来解决这个问题，但仍然没有运气

当前在图像中使用的方法是，我已将跨度位置设置为绝对位置，并将其对齐在中心，它（跨度）位于中心，但文本未垂直对齐。（还尝试了垂直对齐属性，但没有成功）

对此是否有任何修复/解决方法

技术堆栈：带顺风+模块化sass的盖茨比

.linkButton{
右侧填充：30px；
左侧填充：8px；
位置：相对位置；
背景色：rgb（85,85,85）；
过渡：0.25秒，全部缓进缓出；
显示器：flex；
线高：36px；
宽度：180px；
最小高度：35px；
.文本{
过渡：0.25秒，全部缓进缓出；
高度：20px；
线高：20px；
位置：绝对位置；
最高：50%；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
}
&：：之后{
内容：“；
背景色：#fff；
高度：12px；
宽度：9px；
位置：绝对位置；
最高：50%；
右：9px；
转化：translateY（-50%）；
剪辑路径：多边形（0,100%50,0,100%）；
过渡：0.25秒，全部缓进缓出；
z指数：10；
}
&：：之前{
身高：100%；
宽度：100%；
内容：“；
位置：绝对位置；
背景图像：线性渐变（向右，#4100a3 0%，#0d52ff 100%）；
顶部：0px；
左：0px；
z指数：5；
不透明度：0；
过渡：0.25秒，全部缓进缓出；
}
&：悬停{
宽度：185px；
光标：指针；
.文本{
转换：翻译（4%，-50%）；
-webkit转换：翻译（4%，-50%）；
}
&：：之后{
转换：比例（1.25）translateY（-40%）；
}
&：：之前{
不透明度：1；
}
}
}

---

已解决问题在于字体呈现，因为不同浏览器的字体呈现不同，而不是一些线条高度问题

---

这解决了我的问题：

添加相关代码（html/css），我们无法调试图像。@pavel-我的坏！刚刚添加了html/CSD删除

行高

style@DeepuReghunath-已经试过了！！