Hen*_*ryM 2 html internet-explorer-10 internet-explorer-11 microsoft-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>
如果您取出表格中每行的第一个内容,则输入范围将再次起作用.在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
| 归档时间： |
|
| 查看次数： |
9559 次 |
| 最近记录： |