html - IE和Edge隐藏父div后面的框阴影

Question

我有输入 slider 范围，其中应用了拇指事件 box-shadow。在所有浏览器中，阴影显示完美，但当 IE 和 EDGE 时，阴影剪切/隐藏在父 div (#c) 后面。

看到我已经对这个父项使用了overflow:visible，但是当您向左或向右拖动拇指/指针时仍然会剪切/隐藏阴影

#b {
  width: 300px;
  height: 20px;
}
input[type=range]:active::-webkit-slider-thumb {
	box-shadow: 0px 0px 13px 6px #e45685;
}
input[type=range]:active::-ms-thumb {
	box-shadow: 0px 0px 13px 6px #e45685;
}
#c{
  width: 300px;
  height: 32px;
  overflow: visible;
}

<div id="c">
   <input id="b" type="range" min="0" max="10" step="0.1" class="slider-color" >
</div>

甚至尝试将 position:relative;z-index:999 更改为 input[type=range]:active::-ms-thumb 但什么也没有发生。谁能帮帮我

window 10、IE 11.6xx

Answer 1

我认为我的观点伪选择器不会基于ie中的属性选择起作用。您必须使用 selection 标签，例如 a 来应用 box-shadow。下面的代码在 edge, firefox, chrome 浏览器中运行良好。评论有关此的更多信息。

#b {
    width: 300px;
    height: 60px;
}

#c {
    width: 300px;
    height: 60px;
    display: block;
    overflow: visible;
}

input[type=range]:active::-moz-range-thumb {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active:-moz-range-track {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-webkit-slider-thumb {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-thumb {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-track {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-fill-lower {
    box-shadow: 0px 0px 13px 6px #e45685;
}

input[type=range]:active::-ms-fill-upper {
    box-shadow: 0px 0px 13px 6px #e45685;
}

<div id="c">
    <input id="b" type="range" min="0" max="10" step="0.1" class="slider-color">
</div>