css变换在firefox上做奇怪的事情

Question

对于我刚制作的这个按钮，我感到恼火的是，使用translate:transform的文本看起来只是略微移动按钮体。我是产生幻觉的吗？

.clicky1:active { 
    margin-bottom:-2px;
	margin-top:2px;
}

.clicky2:active { 
    transform:translate(0px, 2px);
}

.butt { 
    padding:20px;
    display:flex;
	justify-content:center;
	align-items:center;
    
    font-size:30px;
    
    background-color:rgb(240,240,240);
    border:1px solid black;
} .butt:hover {
    background-color:white;   
}

.cont {
    display:flex;
    justify-content:space-around;
    align-items:center;
    
    width:100%;
    height:200px;
}

<div class="cont">
    <div class="butt clicky1">button1</div>
    <div class="butt clicky2">button2</div>
</div>

仅出现在Firefox上，而不是Chrome中。

如果我没有疯狂，我怎么能不使用保证金来绕过它（因为它应该是一个通用的类，我根据上下文有其他的保证金用途）？

Answer 1

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

我在下面发布了一个代码段，使用position:relative;和top:2px;来完成您在翻译时所做的工作，而不会弄乱边距。它似乎按预期呈现文本，至少在我的测试

中

放大Strange Text Rendering Phenomenon的屏幕截图：

解决方案SNIPPET

.clicky1:active { 
    margin-bottom:-2px;
	margin-top:2px;
}

.clicky2:active { 
    /* Change transform:translate(0px, 2px); to */ top: 2px;
}

.butt { 
    /*add*/position: relative;
    padding:20px;
    display:flex;
	justify-content:center;
	align-items:center;
    
    font-size:30px;
    
    background-color:rgb(240,240,240);
    border:1px solid black;
}

.butt:hover {
    background-color:white;   
}

.cont {
    /*add*/position: relative;
    display:flex;
    justify-content:space-around;
    align-items:center;
    
    width:100%;
    height:200px;
}

<div class="cont">
    <div class="butt clicky1">button1</div>
    <div class="butt clicky2">button2</div>
</div>