输入范围在 ie 或 edge 中不起作用
input range not working in ie or edge
有没有其他人遇到过这个问题,你有解决办法吗?
在 ie 和 edge 中使用这个 html 范围不显示。
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link type="text/css" href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<form method="post" action="/Tactics">
<table align="center" width="100%">
<tr><td>stuff</td><td><input type="range" min="10" max="50"></td></tr>
<tr><td>stuff</td><td><input type="range" min="10" max="50"></td></tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
如果您删除 table 中每一行的第一个内容,输入范围将再次起作用。在 crome、firefox 和 opera 都可以。
有没有人见过这个,你知道如何解决吗?
添加 MS 填充物:
input[type=range]::-ms-track {
/*example */
width: 250px;height: 10px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-upper {
background: gray;
border-radius: 6px;
}
input[type=range]::-ms-fill-lower {
background: gray;
border-radius: 6px;
}
这只是示例,但您需要关注这些:
input[type=range]::-ms-track
input[type=range]::-ms-thumb
input[type=range]::-ms-fill-upper
input[type=range]::-ms-fill-lower
勾选FIDDLE
有没有其他人遇到过这个问题,你有解决办法吗?
在 ie 和 edge 中使用这个 html 范围不显示。
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link type="text/css" href="/static/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<form method="post" action="/Tactics">
<table align="center" width="100%">
<tr><td>stuff</td><td><input type="range" min="10" max="50"></td></tr>
<tr><td>stuff</td><td><input type="range" min="10" max="50"></td></tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
如果您删除 table 中每一行的第一个内容,输入范围将再次起作用。在 crome、firefox 和 opera 都可以。
有没有人见过这个,你知道如何解决吗?
添加 MS 填充物:
input[type=range]::-ms-track {
/*example */
width: 250px;height: 10px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-upper {
background: gray;
border-radius: 6px;
}
input[type=range]::-ms-fill-lower {
background: gray;
border-radius: 6px;
}
这只是示例,但您需要关注这些:
input[type=range]::-ms-track
input[type=range]::-ms-thumb
input[type=range]::-ms-fill-upper
input[type=range]::-ms-fill-lower
勾选FIDDLE