垂直渲染 HTML5 滑块时遇到问题答案

【问题标题】：Having trouble rendering the HTML5 Slider vertically垂直渲染 HTML5 滑块时遇到问题
【发布时间】：2011-02-10 18:54:52
【问题描述】：

我正在使用 JQuery Mobile 来渲染 Slider，效果很好。但是，我无法让它垂直显示。规范说（至少我对它们的阅读）滑块根据高度/宽度确定是垂直显示还是水平显示，但在我的情况下它不起作用。我做错了什么？

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>jQuery Mobile Docs - Forms</title> 
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />  

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script> 

        <style type="text/css">
            #wheel1Speed { height: 300px; width: 100px;}    
        </style>        

    </head> 
<body> 

<div data-role="page">  
    <div data-role="content"> 
        <input type="range" name="wheel1speed" id="wheel1speed" 
            value="0" min="-100" max="100" data-theme="b" data-track-theme="a"  /> 
    </div><!-- /content --> 
</div><!-- /page --> 

</body> 
</html>

【问题讨论】：

这似乎是规范，但至少在 Safari 中，滑块不能垂直工作。有些浏览器可能还没有实现？
@ddargadi 我能够使垂直滑块在 Chrome 中工作，如在 flowplayer.org/tools/demos/rangeinput/vertical.html 中实现的那样。但是，jQuery Mobile 滑块实际上可以在 iPhone 上运行，例如拖动拇指不会拖动整个页面，就像链接处的一样。
"wheel1Speed" != "wheel1speed"
@naugtur 很好，但没有解决问题。
还有一件事 - 当您发布问题时，JQM alpha3 已经发布。请尝试一下，因为您可能已经阅读过它的文档，并且您正在将 JQMa2 链接到该页面

标签： javascript jquery html slider jquery-mobile

【解决方案1】：

以下是如何在 Webkit 浏览器（Chrome 和 Safari）的垂直模式下强制滑块：

#wheel1speed {
    -webkit-appearance: slider-vertical;
}

【讨论】：

【解决方案2】：

我查看了 JQM 文档（最新），没有发现关于滑块能够垂直显示的信息

我还发现了这个： http://forum.jquery.com/topic/is-there-a-vertical-slider-for-jquery-mobile

【讨论】：

是的，我看到了，但是这家伙没有提供任何解决方案。事实上，最后一条评论是我的。
他说很容易将其修复为垂直显示。您可能必须更改一些 css 并交换一些 x 和 y

【解决方案3】：

我遇到了我喜欢的这种方法：

#wheel1speed {
  transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}

【讨论】：