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>

如果您取出表格中每行的第一个内容，则输入范围将再次起作用。它在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

1 个答案: