首先,将高度设置为大于宽度。从理论上讲,这就是您所需要的。在HTML5规格建议尽可能多的:
… UA根据样式表指定的高度和宽度属性的比率确定控件的方向。
Opera已经以这种方式实现了,但是Opera现在正在使用 WebKitBlink。到目前为止,还没有浏览器仅基于高度大于宽度来实现垂直滑块。
无论如何,都需要将高度设置为大于宽度,以确保浏览器之间的布局正确。应用左右填充也将有助于布局和定位。
对于Chrome,请使用
-webkit-appearance: slider-vertical。
对于IE,请使用
writing-mode: bt-lr。
对于Firefox,将
orient="vertical"属性添加到html。可惜他们这样做了。视觉样式应通过CSS(而不是HTML)控制。
input[type=range][orient=vertical]{ writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 8px; height: 175px; padding: 0 5px;}<input type="range" orient="vertical" />
免责声明:
此解决方案基于尚未定义或未完成的CSS属性的当前浏览器实现。如果打算在代码中使用它,请 准备 在发布较新的浏览器版本并完成w3c建议时
进行代码调整 。
不要 在网站上 使用
此属性:不仅是非标准的,而且其行为也从一个浏览器更改为另一个浏览器。none在不同的浏览器中,即使关键字在每个表单元素上的行为也不相同,有些根本不支持。
为在垂直滑块演示标题IE文档错误地表示比宽度将显示范围滑块垂直该设置高度大,但这并
_不_工作。在[代码部分中]),它显然不设置高度或宽度,而是使用
writing-mode。由IE实现的
writing-mode属性非常强大。可悲的是,在撰写本文时,规范的当前工作草案中定义的值要有限得多。如果IE的将来版本放弃对的建议,而现在提出的建议(相当于),则滑块将倒置显示。将来的版本很可能会扩展
bt-lr``vertical-lr``tb-lr``writing-mode接受新的价值,而不是放弃对现有价值的支持。但是,很高兴知道您正在处理什么。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)