时间戳

首页 > 解决方案 > 我的网页无法在 IE 和 Firefox 中运行

html - 我的网页无法在 IE 和 Firefox 中运行

问题描述

我在页面中有一个滑块，它在 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>

标签： htmlcss

解决方案

这是因为您使用的是 -webkit-slider-thumb。它适用于基于 Webkit 的客户端，IE 和 Firefox 使用其他电机，他们忽略了这一点。

推荐阅读