使范围HTML输入类型样式在Chrome和Internet Explorer之间兼容

我有一些代码，其中我设置了一个范围类型输入字段的样式，但似乎这种样式与IE11不兼容

try.html

<div class="footer">
    <div class="row justify-content-center">
        <div class="container">
        <input class="range" type="range" min="0" max="100">
        </div> 
    </div>
</div>

---

我已经设法在Chrome中显示了所需的设计，但是这个CSS似乎不适用于IE11。如何在IE11中正确显示此内容？

请仔细阅读我的代码，您需要添加MS filler

正文{
填充：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；
}

-webkit前缀仅适用于chrome和Safarit，非常感谢您，先生，您是对的。就是这样。谢谢。先生，谢谢您的支持，但这是“声誉”问题。我的选票已经投下，但永远不会公开。因为我的名声到现在还不到15岁

.slider{
  -webkit-appearance: none;
  width: 100%;
  padding: 0;
  height: 3px;
  opacity: 1;
  background: #d3d3d3;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  border:3px solid #6452d6;
  border-radius: 25px;
  background-color: white;
  width: 55px;
  height: 20px;
}