::-ms-thumb 出现在 MS Edge 中的轨道后面

我创建了一个滑块。

In chrome everything is working fine.See image below:

But in MS Edge, thumb appears behind track. See image below:

我创建了一个 codepen 来解释和展示我的问题：https://codepen.io/glalloue/pen/QGKqNd https://codepen.io/glalloue/pen/QGKqNd

CSS（少）应用：

.form input[type=range] {
    z-index: 1;
    align-self: stretch;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    margin: 0;
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
                appearance: none;
        border: none;
        width: 2.5rem;
        height: 2.5rem;
        background-color: white;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px #cccccc, 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    &::-ms-thumb {
        appearance: none;
        border: none;
        width: 2.5rem;
        height: 2.5rem;
        background-color: pink;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px #C0C0C0, 0 2px 4px rgba(0, 0, 0, .2);
    }
}

这是 Internet Explorer 的类似问题：::-ms-thumb 出现在轨道后面 https://stackoverflow.com/questions/30011717/ms-thumb-appears-behind-track
建议的解决方案是为 ::-ms-track 添加边距，但没有成功。

有什么方法可以让 MS Edge 中的 ::-ms-thumb 看起来与 chrome 上的完全相同？

就我而言，删除background-image并且定义下部和上部背景不起作用。因此，如果有人仍在寻找它，这就是我的情况。

问题在于范围元素的高度。设置为 2px，范围轨道高度为 2.5em。

这是一个Codepen 演示在边缘有一个工作示例https://codepen.io/piyukore06/pen/abbqJGK?editors=1111 https://codepen.io/piyukore06/pen/abbqJGK?editors=1111