IE11 的输入类型范围显示最大/最小整数

【问题标题】：Input type range with IE11 showing max/min integerIE11 的输入类型范围显示最大/最小整数
【发布时间】：2019-11-04 20:09:07
【问题描述】：

在 IE11 中使用带有数据列表的范围输入类型时，单击时会显示一个值。如果最小值/最大值恰好大于或小于最大整数 (2,147,483,647)，则将显示该值而不是实际值。

代码：

<input type="range" value="0" min="-999999999999999999999" max="999999999999999999999" list="number" />
<datalist id="number">
    <option>10</option>
    <option>15</option>
    <option>30</option>
    <option>50</option>
    <option>90</option>
</datalist>

我想完全隐藏那个框，但似乎找不到要隐藏的元素。有什么想法吗？这只发生在 IE11 中。

【问题讨论】：

标签： javascript html internet-explorer

【解决方案1】：

您需要在 CSS 代码中将 ms-tooltip 设置为 display: none 以隐藏该值框。

示例 CSS：

input[type=range]::-ms-tooltip {
    display: none;
}

例子：

<!doctype html>
<html>
<head>
<style>
input[type=range]::-ms-tooltip {
    display: none;
}
</style>
</head>
<body>
<input type="range" value="0" min="-999999999999999999999" max="999999999999999999999" list="number" />
<datalist id="number">
    <option>10</option>
    <option>15</option>
    <option>30</option>
    <option>50</option>
    <option>90</option>
</datalist>
</body>
</html>

在 IE 11 浏览器中的输出：

【讨论】：