使用position:absolute居中button的::before伪元素出现间隙问题求助

问题场景 #

通过position:absolute + left:50%/top:50% + translate(-50%,-50%)实现的::before伪元素居中时，FireFox浏览器中伪元素与按钮之间会出现难以消除的微小间隙。

约束要求：

• 必须使用position:absolute实现伪元素居中
• 伪元素实际尺寸为按钮的50%（示例中设为100%以便清晰观察问题）
• 无需伪元素填充整个按钮，仅需实现居中

问题代码：

body { 
    background: #111;
}

button {
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #07f;
    position: relative;
    background: #fff;
}

button::before { 
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0, 209, 105);
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

<button></button>

问题原因 #

FireFox对

这类表单控件的默认渲染机制存在特殊处理，加上translate新属性的亚像素计算精度问题，导致伪元素定位出现微小偏移，进而产生间隙。

可行解决方案 #

方案1：替换translate为transform #

将伪元素的translate属性替换为兼容性更好的transform: translate(-50%, -50%)，修正FireFox的计算精度问题：

body { 
    background: #111;
}

button {
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #07f;
    position: relative;
    background: #fff;
}

button::before { 
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0, 209, 105);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* 替换原translate属性 */
}

方案2：触发硬件加速修正亚像素渲染 #

给按钮添加transform: translateZ(0)，强制浏览器启用硬件加速，消除亚像素偏移：

body { 
    background: #111;
}

button {
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #07f;
    position: relative;
    background: #fff;
    transform: translateZ(0); /* 触发硬件加速 */
}

button::before { 
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0, 209, 105);
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

方案3：重置按钮默认样式并明确盒模型 #

FireFox中

有默认内边距，加上未明确盒模型导致尺寸计算偏差，重置内边距并设置box-sizing: border-box可以解决间隙：

body { 
    background: #111;
}

button {
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid #07f;
    position: relative;
    background: #fff;
    box-sizing: border-box; /* 明确盒模型 */
    padding: 0; /* 重置默认内边距 */
}

button::before { 
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(0, 209, 105);
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}

以上三种方案均满足使用position:absolute实现居中的要求，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者Fire Gamer