我有一个 HTML5 范围 slider 和一个 div id="text_output"它上面。 div 以 css display: none; 开头，我将 css 更新为 display: block;当 slider 移动时。我还更新了 div 中的文本以显示 slider 值。很简单，对吧？
尽我所能，我在让 IE 显示范围和更新 div 时遇到问题(我正在测试版本 11)。我添加了 <meta http-equiv="x-ua-compatible" content="IE=edge">因为当我检查开发工具菜单时它默认呈现为 IE7(那是什么？!)。但是，IE 仍然不会显示范围 slider ，而是选择显示某种 textarea。 .这是一个可以粘贴的最小工作 html 文档，并在 Firefox 和 Chromium 中提供所需的输出，并重现当我的 PC 和同事的 PC 从我的网络服务器访问时所描述的问题。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
#text_output {
display: none;
}
</style>
</head>
<body>
<div id="text_output">Blah</div>
<input id="range_test" name="score" type="range" min="1" max="3" value="2">
<script>
$("#range_test").on("input", function(){
//note that plus '+' casts as an int. Otherwise switch block uses === type comparison
//on slider value (which is passed as a string) and fails
switch( +$("#range_test").val() ){
case 1:
$("#text_output").css("display", "block");
$("#text_output").text("text1");
break;
case 2:
$("#text_output").css("display", "block");
$("#text_output").text("text2");
break;
case 3:
$("#text_output").css("display", "block");
$("#text_output").text("text3");
break;
}
});
</script>
</body>
</html>
我尝试粘贴 Daniel Stern 的 range.css 生成的 css在样式 block 中内联以防出现样式问题，但这并没有改变任何东西。
有人知道为什么这在 IE 中不起作用吗？
最佳答案
埃舍尔，
我在本地对此进行了测试，文档默认为较旧的 IE 版本。如果您在脚本包含之前移动元标记，请参见下文，这将解决您的 IE 版本问题。至于你的其他问题，不幸的是我无法在我当前的 PC 上重现 - 我无法访问支持愤怒 slider 的 IE 版本。我怀疑您的问题可能与元标记位置错误有关。
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<style>
#text_output {
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
关于jquery - Internet Explorer 不会显示范围 slider 或使用 jquery 更新 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28805438/