Css 用于firefox&；的自定义范围滑块剪辑；铬含量不一致

我正在使用CSS样式制作一个自定义范围滑块&在一致性方面存在问题。任何关于这是否可以实现的帮助，或者关于这不能工作的原因，或者其他选择都是非常感谢的

为了创建这个，我使用了拇指的阴影，设置它并在轨迹后面剪裁（我试图制作一个类似于苹果OS滑块、MIUI滑块或三星One UI上的新滑块的样式组件）。附加的图片将更明确地突出我的问题

剪裁前的样式设置（使用

溢出：隐藏
执行此操作）。我把大纲涂上了颜色，以便能注意到我的问题。似乎存在某种不可见的边距和/或填充，在拇指（内部为深红色矩形）和整个范围滑块（灰色边框轮廓）之间留有间隙

在这里，我在

[type=range]：：-webkit slider runnable track

&

[type=range]：：-moz-range track

块中加入了样式

溢出：隐藏

，结果是Chrome有所改变，但Firefox没有改变。解释一下为什么会有帮助（我也不知道如何使用Firefox调试工具和Chrome）

在这里，我在主

[type=range]

块中包含了

溢出：隐藏
&它做了它应该做的事情。然而，正如图1所指出的，由于存在一个差距，我无法解释Firefox版本的原因，它呈现出与Chrome版本不同的效果（这是我想要的风格）

下面的代码示例，没有围绕thumb&track的调试大纲。这应该按照chrome的预期呈现，但Firefox不是。我还没有检查样式是否与其他浏览器兼容，因为我现在主要关注这些浏览器

[类型=范围]{
-webkit外观：无；
外观：无；
宽度：160px；
背景：透明；
溢出：隐藏；
}
[类型=范围]：焦点{
大纲：0；
}
[类型=范围]：-moz范围拇指{
游标：默认值；
边界：0；
盒影：-80px 0px 0px 80px#e30425；
高度：6px；
宽度：4px；
边界半径：0%；
背景#e30425；
}
[类型=范围]：-webkit滑块拇指{
外观：无；
边际上限：0px；
游标：默认值；
边界：0；
盒影：-80px 0px 0px 80px#e30425；
高度：6px；
宽度：4px；
边界半径：0%；
背景#e30425；
}
[类型=范围]：-moz范围音轨{
游标：默认值；
边界：0；
溢出：隐藏；
高度：6px；
宽度：160px；
边界半径：8px；
背景：rgba（227,4,37,0.38）；
}
[类型=范围]：-webkit滑块可运行轨迹{
游标：默认值；
边界：0；
溢出：隐藏；
高度：6px；
宽度：160px；
边界半径：8px；
背景：rgba（227,4,37,0.38）；
}
身体{
最小高度：100vh；
显示：网格；
放置项目：中心；
背景：#ffffff；
}

样式w/CSS