jQuery Mobile范围滑块输入框对齐

Question

我在实现rangeslider小部件时遇到了问题，如jQuery mobile demo page中所示。它看起来完美的存在，但是，如果我复制确切同一代码：

<form> 
<div data-role="rangeslider"> 
<label for="range-1a">Rangeslider:</label> 
<input type="range" name="range-1a" id="range-1a" min="0" max="100" value="40"> 
<label for="range-1b">Rangeslider:</label> 
<input type="range" name="range-1b" id="range-1b" min="0" max="100" value="80"> 
</div> 
</form> 

输入框是完全移位，如本jsFiddle看到。

我该怎么做？为什么插入与演示页面相同的滑块非常困难？

Answer 1

我不知道如何，但不知何故，我记得可能有一个问题，复制&粘贴。但是由于这个问题很难找到，所以我将这里的问题留给其他人查看的工作解决方案：

从jQuery Mobile演示页面复制代码会为空格插入一些特殊的不可见字符，这会产生这种奇怪的行为。确保所有的空格都是实际的空格（例如，在编辑器中找到&或者自己编写代码）。

因此，从顶部使用代码段确实有效，因为不包括奇怪的空格。

Answer 2

我有同样的问题，这确实是由于jQuery的查看源代码转换空格不间断空格（\uc2a0）

转换的Unicode字符标准空格修复该问题

编辑这似乎只发生在Webkit浏览器中，Firefox复制正确的字符