输入范围在 ie 或 edge 中不起作用

Question

有没有其他人遇到过这个问题，你有解决办法吗？

在 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 都可以。

有没有人见过这个，你知道如何解决吗？

Answer 1

添加 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 中不起作用

input range not working in ie or edge

html

internet-explorer-11

internet-explorer-10

microsoft-edge