Rangeslider在某些IE中渲染严重(JQueryMobile 1.3.1)

时间:2013-07-01 10:40:45

标签: jquery-mobile

这个非常基本的页面:http://www.marianotomatis.it/test.php 在“某些”IE版本中无法正确呈现。

<!DOCTYPE HTML>
<html>
<head><title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-    1.3.1.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
</head>
<body>
<div id="A" name="A">
 <div data-role="rangeslider">
    <label for="B">Range</label>
    <input type="range" name="B" id="B" min="0" max="100">
    <label for="C">Range</label>
    <input type="range" name="C" id="C" min="0" max="100">
 </div>
</div>
</body>
</html>

它停在此行的 jquery.mobile-1.3.1.js 脚本中:

_sliderFirst = $.data( _inputFirst.get(0), "mobileSlider" ).slider,
带有 SCRIPT5007 错误的

(“无法获取属性'滑块'的值:对象为空或未定义。”

我正在使用IE10进行调试,我测试了浏览器模式(BM)和文档模式(DM)的某些组合,以检查错误的组合。希望这会有所帮助:

BM = IE10 DM =标准[OK]
BM = IE9 DM =标准[OK]
BM = IE8 DM =标准[OK]
BM = IE7 DM =标准[OK]
BM = IE10 DM =非标准[OK]
BM = IE9 DM =非标准[OK]
BM = IE8 DM =非标准[OK]
BM = IE7 DM =非标准[OK]
BM = IE10 DM =标准IE9 [错误]
BM = IE9 DM =标准IE9 [错误]
BM = IE8 DM =标准IE9 [错误]
BM = IE7 DM =标准IE9 [错误]
BM = IE10 DM =标准IE8 [错误]
BM = IE9 DM =标准IE8 [错误]
BM = IE8 DM =标准IE8 [错误]
BM = IE7 DM =标准IE8 [错误]
BM = IE10 DM =标准IE7 [错误]
BM = IE9 DM =标准IE7 [错误]
BM = IE8 DM =标准IE7 [错误]
BM = IE7 DM =标准IE7 [错误]

我也试过用IE8调试它,它正确地呈现页面。 提前感谢任何建议。

2 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,当我在输入中添加data-type =“range”时,我摆脱了Internet Explorer中的错误:

<input type="range" data-type="range" name="B" id="B" min="0" max="100">

答案 1 :(得分:0)

这是另一个针对jQuery Mobile 1.3.0“Error message with rangeslider in IE9 (JQuery Mobile)

提出的问题

我已经能够在IE10(包括WP8)和Chrome 28中的jQuery Mobile v1.3.2中重现这个问题。

在JQM组合JS文件中进行了一些挖掘之后,我发现几个地方的逻辑调用类似$.data( _inputFirst.get(0), "mobileSlider" ).slider的内容,如果你进入调用堆栈,你会发现它一次检查变量未定义,如果是,则将密钥("mobileSlider")转换为camel-case并再次检查。在这种情况下,原始密钥是驼峰式的,如果它是全部小写的连字符("mobile-slider"),它就不会失败。

要在JQM v1.3.2中更正此问题,我已将"mobileSlider"的实例替换为"mobile-slider",现在我再次具有预期的行为和工作滑块和范围滑块。

以下是我进行上述更改的行号和行号。

  1. jquery.mobile-1.3.1.js(7861):_ sliderFirst = $ .data(_inputFirst.get(0),“ mobileSlider ”).slider,
  2. jquery.mobile-1.3.1.js(7862):_ sliderLast = $ .data(_inputLast.get(0),“ mobileSlider ”)。.slider,
  3. jquery.mobile-1.3.1.js(7863):firstHandle = $ .data(_inputFirst.get(0),“ mobileSlider ”)。。handle,
  4. jquery.mobile-1.3.1.js(7919):$ .data(this._inputFirst.get(0),“ mobileSlider ”)。draging = true;
  5. jquery.mobile-1.3.1.js(7920):$ .data(this._inputFirst.get(0),“ mobileSlider ”)。refresh(event);
  6. jquery.mobile-1.3.1.js(7932):$ .data(otherSlider.get(0),“ mobileSlider ”)。dragging = true;
  7. jquery.mobile-1.3.1.js(7933):$ .data(otherSlider.get(0),“ mobileSlider ”)。refresh(event);
  8. jquery.mobile-1.3.1.js(8006):$ .data(otherSlider.get(0),“ mobileSlider ”)。。handle.focus();
  9. jquery.mobile-1.3.1.js(8014):$ .data(thisSlider.get(0),“ mobileSlider ”)。。readle.css(“z-index”,1 );
  10. jquery.mobile-1.3.1.js(8015):$ .data(otherSlider.get(0),“ mobileSlider ”)。。readle.css(“z-index”,0 );
  11. jquery.mobile-1.3.1.js(8017):$ .data(otherSlider.get(0),“ mobileSlider ”)。。readle.css(“z-index”,“ “);
  12. jquery.mobile-1.3.1.js(8018):$ .data(thisSlider.get(0),“ mobileSlider ”)。handlele.css(“z-index”,“ “);
  13. jquery.mobile-1.3.1.js(8029):var min = parseInt($ .data(this._inputFirst.get(0),“ mobileSlider ”)。handle.get( 0).style.left,10),
  14. jquery.mobile-1.3.1.js(8030):max = parseInt($ .data(this._inputLast.get(0),“ mobileSlider ”)。。handle.get(0 ).style.left,10),