Safari上的CSS文本对齐问题

Question

文本在Chrome中正确对齐，但当它在Safari中运行时，文本混淆了它的位置，并接触到了容器(文本容器(的顶部

Chrome：Chrome视图

Safari:Safari视图

正如你在Safari中看到的那样，文本容器(span(有合适的大小，但里面的文本已经触及了顶部。我试过通过打乱高度、线条高度、位置等来解决这个问题，但仍然没有成功。

目前在图像中使用的方法是，我已经使跨度位置绝对，并将其在中心对齐，它(跨度(在中心，但文本没有垂直对齐。(也尝试了垂直对齐属性，但没有成功(

对此有什么解决办法吗？

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

.linkButton {
padding-right: 30px;
padding-left: 8px;
position: relative;
background-color: rgb(85, 85, 85);
transition: 0.25s all ease-in-out;
display: flex;
line-height: 36px;
width: 180px;
min-height: 35px;
.text {
transition: 0.25s all ease-in-out;
height: 20px;
line-height: 20px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
&::after {
content: "";
background-color: #fff;
height: 12px;
width: 9px;
position: absolute;
top: 50%;
right: 9px;
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 50%, 0 100%);
transition: 0.25s all ease-in-out;
z-index: 10;
}
&::before {
height: 100%;
width: 100%;
content: "";
position: absolute;
background-image: linear-gradient(to right, #4100a3 0%, #0d52ff 100%);
top: 0px;
left: 0px;
z-index: 5;
opacity: 0;
transition: 0.25s all ease-in-out;
}
&:hover {
width: 185px;
cursor: pointer;
.text {
transform: translate(4%, -50%);
-webkit-transform: translate(4%, -50%);
}
&::after {
transform: scale(1.25) translateY(-40%);
}
&::before {
opacity: 1;
}
}
}

<a href="/features">
<div class="index-module--linkButton--3DaPN mt-3 md:mt-12 mx-auto md:mx-0 flex items-center justify-center text-white">
<span class="index-module--text--QcmPb z-10">View all Features</span>
</div>
</a>

Answer 1

已解决问题是字体呈现，因为不同浏览器的字体呈现不同，而不是一些行高问题。。。

这解决了我的问题：Mac/PC上的字体渲染/线条高度问题(元素外(