css转换在firefox上做一些奇怪的事情

我刚刚制作的这个按钮让我很恼火，使用

translate:transform

，文本相对于按钮主体似乎移动了一点点。我有幻觉吗

。单击y1:活动{
边缘底部：-2px；
边缘顶部：2倍；
}
.clicky2:活动{
转换：转换（0px，2px）；
}
.butt{
填充：20px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：30px；
背景色：rgb（240240）；
边框：1px纯黑；
}.屁股：悬停{
背景色：白色；
}
续{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
宽度：100%；
高度：200px；
}

按钮1
按钮2

我看到了，但我认为这只是FF在元素使用translate（可能是一个bug）时呈现文本方式的一个视觉异常。我注意到，当我改变Firefox的页面缩放级别以及不同的浏览器宽度时，奇怪的文本呈现现象就会消失

我在下面贴了一个答案片段，使用了

position:relative和<代码>顶部：2px以完成您在翻译过程中所做的工作，而不影响边距。至少在我的测试中，它看起来像预期的那样呈现文本

奇怪文本呈现现象的放大屏幕截图：

解决方案片段
。单击y1:活动{
边缘底部：-2px；
边缘顶部：2倍；
}
.clicky2:活动{
/*更改转换：转换（0px，2px）；到*/top:2px；
}
.butt{
/*添加*/位置：相对；
填充：20px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：30px；
背景色：rgb（240240）；
边框：1px纯黑；
}
.屁股：悬停{
背景色：白色；
}
续{
/*添加*/位置：相对；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
宽度：100%；
高度：200px；
}

按钮1
按钮2
我看到了，但我认为这只是FF在元素使用translate（可能是一个bug）时呈现文本方式的一个视觉异常。我注意到，当我改变Firefox的页面缩放级别以及不同的浏览器宽度时，奇怪的文本呈现现象就会消失

我在下面贴了一个答案片段，使用了
position:relative和<代码>顶部：2px以完成您在翻译过程中所做的工作，而不影响边距。至少在我的测试中，它看起来像预期的那样呈现文本

奇怪文本呈现现象的放大屏幕截图：

解决方案片段
。单击y1:活动{
边缘底部：-2px；
边缘顶部：2倍；
}
.clicky2:活动{
/*更改转换：转换（0px，2px）；到*/top:2px；
}
.butt{
/*添加*/位置：相对；
填充：20px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：30px；
背景色：rgb（240240）；
边框：1px纯黑；
}
.屁股：悬停{
背景色：白色；
}
续{
/*添加*/位置：相对；
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
宽度：100%；
高度：200px；
}

按钮1
按钮2
无法在FF40.0.2I中复制我也使用了40.0.2，非常轻微，文本相对于盒子应该向左和向下移动1px对不起..没有看到它。无法在FF40.0.2I中复制我也使用了40.0.2，非常轻微，文本相对于盒子应该向左和向下移动1px对不起..没有看到它。