:: - ms-thumb出現在MS Edge的軌道後面

Question

我創建了一個滑塊。

在Chrome一切工作fine.See圖像下方：

但是在MS邊，拇指出現後面的軌道。見下圖：

我創建了一個codepen來展示和講解我的問題：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 appears behind track
建議的解決方案是將餘量添加到:: - ms-track，但沒有成功。

有什麼辦法可以做到:: MS-edge中的ms-thumb和chrome中的ms-thumb完全一樣嗎？

Answer 1

問題是（間接地）background-image上輸入：

<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"> 

這background-image是必要的前和鉻和Safari拇指後設置的顏色。

要解決問題，我需要在css .form input[type=range]上設置高度值。
但是，如果我這樣做，背景圖像採取所有的高度值。 它在使用Chrome，但不在MS邊緣。

因此，要解決這個問題，有必要使用MS邊緣瀏覽器特異性：

1. 輸入刪除background-image。
2. 添加CSS樣式：-ms-fill-lower和-ms-fill-upper之前和之後的拇指

結果設置顏色：

<!-- Android & iOS --> 
<input id="perimeter" type="range" min="0" max="4" step="1" style="background-image:-webkit-linear-gradient(left, transparent 0%, rgba(164,223,253,0.8) 1%, rgba(164,223,253,0.8) {{ perimeter *100/(distances.length -1) | number:0 }}%, black {{ perimeter *100/(distances.length -1) + 1 | number:0 }}%, black 100%)"/> 
<!-- Windows --> 
<input id="perimeter" type="range" min="0" max="4" step="1" style="height: 2.5rem;"/> 

你需要條件輸入顯示屏。如果您使用角度，請使用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; 
    } 
}