问题
Has anyone else come across this issue and do you have a solution.
Using this html in ie and edge the range doesn't show.
<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>
If you take out the first stuff for each row in the table the input range works again. It's fine in crome, firefox and opera.
Has anyone seen this and do you know how to fix?
回答1:
Add MS fillers:
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;
}
This is just example but you need to focus on these:
input[type=range]::-ms-track
input[type=range]::-ms-thumb
input[type=range]::-ms-fill-upper
input[type=range]::-ms-fill-lower
Check the FIDDLE
来源：https://stackoverflow.com/questions/34519215/input-range-not-working-in-ie-or-edge