Html Internet Explorer上的自定义范围滑块问题

下面是我的滑块的css。问题是滑块在IE上完全失败了。 以下是在线版本： 我尝试使用MS填充物，但效果不好，因为我不熟悉如何正确使用它们

.valeurPrix {
  position: absolute;
  top: -59px;
  left: 177px;
}

.range-slider {
  position: relative;
  width: 450px;
  float: left;
  margin-right: 5px;
}

.range-slider .input-range {
  -webkit-appearance: none;
  width: 449px;
  height: 5px;
  border-radius: 5px;
  background: #ccc;
  outline: none;
}

.range-slider .input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #164188;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

.range-slider .input-range::-webkit-slider-thumb:hover {
  background: #164188;
}

.range-slider .input-range:active::-webkit-slider-thumb {
  background: #164188;
}

.range-slider .input-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #164188;
  cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

.range-slider .input-range::-moz-range-thumb:hover {
  background: #164188;
}

.range-slider .input-range:active::-moz-range-thumb {
  background: #164188;
}

.range-slider .range-value {
  display: inline-block;
  position: relative;
  width: 100px;
  color: #fff;
  font-size: 23px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  background: #164188;
  padding: 5px 10px;
  margin-left: 7px;
}



::-moz-range-track {
  background: #ccc;
  border: 0;
}

input::-moz-focus-inner {
  border: 0;
}

您能指导我如何在该代码中使用MS填充符吗？

正文{
填充：30px；
}
输入[类型=范围]{
/*删除默认webkit样式*/
-webkit外观：无；
/*修复FF无法应用焦点样式错误*/
边框：1px纯白；
/*在FF中正确调整轨道尺寸所需*/
宽度：300px；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：300px；
高度：5px；
背景：ddd；
边界：无；
边界半径：3px；
}
输入[类型=范围]：-webkit滑块拇指{
-webkit外观：无；
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：一枝黄花；
利润上限：-4px；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：焦点：--webkit滑块可运行轨迹{
背景：#ccc；
}
输入[类型=范围]：-moz范围轨迹{
宽度：300px；
高度：5px；
背景：ddd；
边界：无；
边界半径：3px；
}
输入[类型=范围]：-moz范围拇指{
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：一枝黄花；
}
/*将轮廓隐藏在边框后面*/
输入[类型=范围]：-moz focusring{
外形：1px纯白；
轮廓偏移：-1px；
}
输入[类型=范围]：-ms轨道{
宽度：300px；
高度：5px；
/*从曲目中删除背景颜色，我们将使用ms fill lower和ms fill upper*/
背景：透明；
/*用透明的边框为较大的拇指留出空间*/
边框颜色：透明；
边框宽度：6px0；
/*删除默认的记号*/
颜色：透明；
}
输入[类型=范围]：-ms填充下限{
背景：#777；
边界半径：10px；
}
输入[类型=范围]：-ms填充上限{
背景：ddd；
边界半径：10px；
}
输入[类型=范围]：-ms thumb{
边界：无；
高度：16px；
宽度：16px；
边界半径：50%；
背景：一枝黄花；
}
输入[类型=范围]：焦点：-毫秒填充下限{
背景：#888；
}
输入[类型=范围]：焦点：--ms填充上限{
背景：#ccc；
}

首先，由于在IE浏览器中只支持输入文本类型和密码类型，我建议您可以尝试使用

事件来获取范围值。代码如下：

var range = $('.input-range'),
  value = $('.range-value');

value.html(range.attr('value') + ' %');

range.on('mouseup', function() {
  value.html(this.value + ' %');
});

其次，请尝试使用以下CSS样式：

<style>
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .PrixMin {
        float: left;
        color: #164188;
        font-size: 19px;
        margin-right: 5px;
    }

    .selecteurPrix {
        padding-top: 15px;
    }

    body {
        font-family: sans-serif;
        padding: 40px;
    }

    .valeurPrix {
        position: absolute;
        top: -59px;
        left: 177px;
    }

    .range-slider {
        position: relative;
        width: 450px;
        float: left;
        margin-right: 5px;
    }


    @media (-webkit-min-device-pixel-ratio:0) {
        /* Non-IE styles here*/
        .range-slider .input-range {
            -webkit-appearance: none;
            width: 449px;
            height: 5px;
            border-radius: 5px;
            background: #ccc;
            outline: none;
        }
    }

    @media (-ms-high-contrast:none),(-ms-high-contrast:active) {
        /* IE styles here*/
        .range-slider .input-range {
            /*removes default webkit styles*/
            -webkit-appearance: none;
            /*fix for FF unable to apply focus style bug */
            border: 1px solid white;
            /*required for proper track sizing in FF*/
            width: 450px;
            outline: none;
        }
    }

    .range-slider .input-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #164188;
        cursor: pointer;
        -webkit-transition: background .15s ease-in-out;
        transition: background .15s ease-in-out;
    }

                .range-slider .input-range::-webkit-slider-thumb:hover {
                    background: #164188;
                }

            .range-slider .input-range:active::-webkit-slider-thumb {
                background: #164188;
            }

            .range-slider .input-range::-moz-range-thumb {
                width: 20px;
                height: 20px;
                border: 0;
                border-radius: 50%;
                background: #164188;
                cursor: pointer;
                -webkit-transition: background .15s ease-in-out;
                transition: background .15s ease-in-out;
            }

                .range-slider .input-range::-moz-range-thumb:hover {
                    background: #164188;
                }

            .range-slider .input-range:active::-moz-range-thumb {
                background: #164188;
            }

        .range-slider .range-value {
            display: inline-block;
            position: relative;
            width: 100px;
            color: #fff;
            font-size: 23px;
            line-height: 32px;
            text-align: center;
            border-radius: 3px;
            background: #164188;
            padding: 5px 10px;
            margin-left: 7px;
        }
    ::-moz-range-track {
        background: #ccc;
        border: 0;
    }
    input::-moz-focus-inner {
        border: 0;
    }

    input[type=range] {
        margin: 2px;
    }

        input[type=range]::-ms-track {
            width: 450px;
            height: 5px;
            /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
            background: transparent;
            /*leave room for the larger thumb to overflow with a transparent border */
            border-color: transparent;
            border-width: 6px 0;
            /*remove default tick marks*/
            color: transparent;
        }

        input[type=range]::-ms-fill-lower {
            background: #ccc;
            border-radius: 10px;
        }

        input[type=range]::-ms-fill-upper {
            background: #ccc;
            border-radius: 10px;
        }

        input[type=range]::-ms-thumb {
            border: none;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #164188;
        }

        input[type=range]:focus::-ms-fill-lower {
            background: #ccc;
        }

        input[type=range]:focus::-ms-fill-upper {
            background: #ccc;
        }
</style>

* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
普里斯明先生{
浮动：左；
颜色：#164188；
字号：19px；
右边距：5px；
}
.selecteurPrix{
填充顶部：15px；
}
身体{
字体系列：无衬线；
填充：40px；
}
瓦勒普里克斯先生{
位置：绝对位置；
顶部：-59px；
左：177px；
}
.范围滑块{
位置：相对位置；
宽度：450px；
浮动：左；
右边距：5px；
}
@介质（-webkit最小设备像素比：0）{
/*这里是非IE风格*/
.范围滑块.输入范围{
-webkit外观：无；
宽度：449px；
高度：5px；
边界半径：5px；
背景：#ccc；
大纲：无；
}
}
@介质（-ms高对比度：无），（-ms高对比度：激活）{
/*这是我的风格*/
.范围滑块.输入范围{
/*删除默认webkit样式*/
-webkit外观：无；
/*修复FF无法应用焦点样式错误*/
边框：1px纯白；
/*在FF中正确调整轨道尺寸所需*/
宽度：450px；
大纲：无；
}
}
.范围滑块。输入范围：-webkit滑块拇指{
-webkit外观：无；
宽度：20px；
高度：20px；
边界半径：50%；
背景：#164188；
光标：指针；
-webkit过渡：背景。15秒易入易出；
过渡：背景。15秒缓进缓出；
}
.范围滑块。输入范围：-webkit滑块拇指：悬停{
背景：#164188；
}
.range滑块。输入范围：活动：-webkit滑块拇指{
背景：#164188；
}
.范围滑块.输入范围：-moz范围滑块{
宽度：20px；
高度：20px；
边界：0；
边界半径：50%；
背景：#164188；
光标：指针；
-webkit过渡：背景。15秒易入易出；
过渡：背景。15秒缓进缓出；
}
.范围滑块.输入范围：-moz范围拇指：悬停{
背景：#164188；
}
.range滑块。输入范围：活动：：-moz范围拇指{
背景：#164188；
}
.范围滑块.范围值{
显示：内联块；
位置：相对位置；
宽度：100px；
颜色：#fff；
字体大小：23px；
线高：32px；
文本对齐：居中；
边界半径：3px；
背景：#164188；
填充物：5px10px；
左边距：7px；
}
：-moz音程轨迹{
背景：#ccc；
边界：0；
}
输入：：-moz焦点内部{
边界：0；
}
输入[类型=范围]{
保证金：2倍；
}
输入[类型=范围]：-ms轨道{
宽度：450px；
高度：5px；
/*从曲目中删除背景颜色，我们将使用ms fill lower和ms fill upper*/
背景：