Css ：-ms thumb显示在ms Edge中轨迹的后面

我已经创建了一个滑块

在chrome中，一切正常。请参见下图：

但在MS Edge中，拇指出现在轨迹后面。见下图：

我创建了一个代码笔来解释和显示我的问题：

应用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轨道上添加边距，但没有成功

有没有办法让我的：：-ms edge中的ms thumb看起来和chrome上的完全一样？

问题是（间接地）

输入时的背景图像

：

<input name="perimeter" id="perimeter" style="background-image: -webkit-linear-gradient(left, transparent 0%, rgba(164, 223, 253, 0.8) 1%, rgba(164, 223, 253, 0.8) 25%, black 26%, black 100%);" type="range" min="0" max="4" step="1" value="1">

您需要调节输入显示。如果使用angular，请使用

ng If

仅在android和ios上显示第一个输入，在windows上显示第二个输入

更少的文件是：

@thumb-color: white;
@thumb-radius: 50%;
@thumb-height: 2.5rem;
@thumb-width: 2.5rem;

@track-width: 100%;
@track-height: 3px;
@track-fill-lower-color: rgba(164,223,253,0.8);
@track-fill-upper-color: black;

.track() {
    -webkit-appearance: none;
    width: @track-width;
    height: @track-height;
    cursor: pointer;
}

.thumb() {
    -webkit-appearance: none;
    border: none;
    height: @thumb-height;
    width: @thumb-width;
    border-radius: @thumb-radius;
    background: @thumb-color;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px grey, 0 2px 4px rgba(0, 0, 0, .2);
}

input[type=range] {
  -webkit-appearance: none;
  margin: @thumb-height/2 0;
  width: @track-width;

  &::-webkit-slider-runnable-track {
    .track();
    border: none;
  }

  &::-webkit-slider-thumb {
    .thumb();
    -webkit-appearance: none;
    margin-top: -1.25rem; // @thumb-height / 2
  }

  &::-moz-range-track {
     .track();
     border: none;
  }
  &::-moz-range-thumb {
     .thumb();
  }

  &::-ms-track {
    .track();
    background: transparent;
    color: transparent;
  }
  &::-ms-thumb {
    .thumb();
  }
  &::-ms-fill-lower {
    background: @track-fill-lower-color;
  }
  &::-ms-fill-upper {
    background: @track-fill-upper-color;
  }
}

---

在我的例子中，删除

背景图像

并定义下部和上部背景都不起作用。所以，如果有人还在寻找它，这就是我的情况

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

下面是一个代码笔演示，在edge中有一个工作示例

---

你应该看看这个@Rahul：我不知道在你的链接中使用什么。我试图在ms thumb上设置z索引，但什么也没发生，

@thumb-color: white;
@thumb-radius: 50%;
@thumb-height: 2.5rem;
@thumb-width: 2.5rem;

@track-width: 100%;
@track-height: 3px;
@track-fill-lower-color: rgba(164,223,253,0.8);
@track-fill-upper-color: black;

.track() {
    -webkit-appearance: none;
    width: @track-width;
    height: @track-height;
    cursor: pointer;
}

.thumb() {
    -webkit-appearance: none;
    border: none;
    height: @thumb-height;
    width: @thumb-width;
    border-radius: @thumb-radius;
    background: @thumb-color;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px grey, 0 2px 4px rgba(0, 0, 0, .2);
}

input[type=range] {
  -webkit-appearance: none;
  margin: @thumb-height/2 0;
  width: @track-width;

  &::-webkit-slider-runnable-track {
    .track();
    border: none;
  }

  &::-webkit-slider-thumb {
    .thumb();
    -webkit-appearance: none;
    margin-top: -1.25rem; // @thumb-height / 2
  }

  &::-moz-range-track {
     .track();
     border: none;
  }
  &::-moz-range-thumb {
     .thumb();
  }

  &::-ms-track {
    .track();
    background: transparent;
    color: transparent;
  }
  &::-ms-thumb {
    .thumb();
  }
  &::-ms-fill-lower {
    background: @track-fill-lower-color;
  }
  &::-ms-fill-upper {
    background: @track-fill-upper-color;
  }
}