Question

是否可以在IE8中使用任何库运行某些HTML5输入类型？例如，范围。

Points: <input type="range" name="points" min="1" max="10">
<input type="submit" value="send">

Answer 1

IE8不支持<input type="range">。在旧版浏览器中实现这一目标的最无缝方法是检测支持并在需要时使用“polyfill”。 polyfill旨在为旧浏览器添加支持，通常使用一些试图模仿本机行为的JavaScript。

This page有一个很好的polyfill列表。（而Modernizr是检测这类事物支持的好方法。）你会在该列表中找到各种输入类型的polyfill。

Answer 2

您可以使用modernizr检查您的浏览器是否支持HTML5 你可以使用它在IE8中运行的Jquery UI Slider

查看此页面：http://jqueryui.com/slider/
演示：http://jsbin.com/eduren/1/edit

读取滑块值/百分比值：
var val = $（'＃slider'）。slider（“option”，“value”）;

Answer 3

我想到了Chrome框架，这是一个将Chrome引擎置于Trident引擎盖下的Google项目。

网址：http://www.google.com/chromeframe

我从未尝试过自己。当浏览器遇到错误时，我们会修复它或找到解决方法。我不是附加组件的忠实粉丝，特别是从管理角度来看。

另一种选择是使用modernizr库来检测浏览器功能并找到解决方法。总有一些hacky方式让你出路。使用html5 shiv可能是找到出路的一种方法。这是我在处理IE8时的第二个选择。问候。

Answer 4

Ie8将所有“html5”输入类型呈现为文本。但是，您可以使用类似

的目标使用JavaScript来定位这些类型

$('[type=range]').slider() //insert your favorite library here...

我知道它没有被标记为jquery，但我认为这个例子仍然很清楚

Answer 5

将此代码用于适用于所有IE版本和所有HTML5浏览器的范围输入：

<input name="range" id="range" type="range" min="1" max="10"/>
<!--[if lt IE 10]>
    <div id="range_ie" style="position:relative; width:255px; height:15px; font-size:0px; cursor:default" onclick="changevalue()" onselectstart="return false">
        <div style="position:absolute; left:0px; top:5px; width:100%; height:30%; border-left:1px solid gray; border-top:1px solid gray; border-right:1px solid white; border-bottom:1px solid white; background:silver"></div>
        <div id="slider" style="position:absolute; left:0px; top:0px; width:5px; height:100%; border:1px solid gray; background:#EBEBEB; font-size:15px" onmousedown="document.onmousemove=changevalue">&nbsp;&nbsp;</div>
    </div>
    <script type="text/javascript">
        window.document.getElementById("range").style.display = "none";
        document.body.onmouseup = function(){document.onmousemove = function(){void(0)}};
        function changevalue(){
            range.value = ((navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x) * (eval(range.max) - eval(range.min))/eval(window.document.getElementById("range_ie").style.width.substring(0,window.document.getElementById("range_ie").style.width.search("px"))) + eval(range.min);
            if(range.value > eval(range.max)){range.value = range.max}
            if(range.value < eval(range.min)){range.value = range.min}
            window.document.getElementById("slider").style.left = (range.value - eval(range.min)) * eval(window.document.getElementById("range_ie").style.width.substring(0,window.document.getElementById("range_ie").style.width.search("px")))/(eval(range.max) - eval(range.min)) + "px";
        }
    </script>
<![endif]-->

是否可以在IE8中运行一些HTML5输入类型？

5 个答案: