我在页面中有一个 slider ，它在 chrome 浏览器中运行良好，但在 IE 或 firefox 中不起作用，但我希望它在所有浏览器(IE、firefox 和 chrome)上运行。 我还编写了 javascript oninput() 函数，我希望它能在上述所有浏览器上运行。
<html>
<head>
<style>
input[type=range] {
-webkit-appearance: none;
background-color: transparent;
width: 300px;
height: 20px;
padding-top:10px;
overflow:hidden;
display: inline-block;
vertical-align: middle;
}
input[type=range]:focus{
outline:none;
}
input[type="range"]::-webkit-slider-thumb {
position:relative;
-webkit-appearance: none;
cursor:pointer;
background-color: #f1f1f1;
width: 10px;
height: 30px;
box-shadow: 1px 5px 10px -1px rgba(0, 0,0.2),
-25px 0 0 20px rgba(0,0,255,0.3),
-75px 0 0 20px rgba(0,0,255,0.3),
-125px 0 0 20px rgba(0,0,255,0.3),
-175px 0 0 20px rgba(0,0,255,0.3),
-225px 0 0 20px rgba(0,0,255,0.3),
-275px 0 0 20px rgba(0,0,255,0.3),
-325px 0 0 20px rgba(0,0,255,0.3);
z-index:2;
}
input[type="number"] {
width: 80px;
height: 20px;
background-color: #f1f1f1;
}
input[type=number]:focus{
outline:none;
}
.number-wrapper {
position: relative;
}
</style>
</head>
<body>
<form align=center>
Length<br><input type="range" id="Minlen_range" name="MinlenRange" min="1" max="100" value=10 oninput="this.form.MinlenInput.value=this.value" />
<input type="number" id="Minlen_text" name="MinlenInput" min="1" max="100" value=10 oninput="this.form.MinlenRange.value=this.value">
</form>
</body>
</html>最佳答案
这是因为您正在使用 -webkit-slider-thumb。它适用于基于 Webkit 的客户端，IE 和 Firefox 使用其他引擎，它们忽略了这一点。
关于html - 我的网页在 IE 和 Firefox 中不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57921068/