在 WebIOPi 中使用时 HTML 无法正常工作答案

【问题标题】：HTML does not work properly when used in WebIOPi在 WebIOPi 中使用时 HTML 无法正常工作
【发布时间】：2017-06-23 17:21:58
【问题描述】：

我通过 WebIOPi 框架在我的 Raspberry Pi 2 中制作了一个 HTML 控件。当我引入类型范围输入时，它在 HTML 中看起来不错，但是当我将其 ulpload 到我的 Raspberry Pi 并查看它的外观时，它并不好。

This is how the range input looks in the HTML

And this is how it shows in my local IP address when I upload it

作为说明，我没有忘记上传 CSS 修改并将其包含在 HTML 文件的标题中。

我通过以下方式添加了输入：

<input id="volSlider" class="asrange" type="range" min="0" max="30"/>

和 CSS：

input[type=range] {
width: 10px; /* Specific width is required for Firefox. */
height: 100%;
background: transparent; /* Otherwise white in Chrome */
/*transform: rotate(-90deg);*/
-webkit-appearance: slider-vertical;
vertical-align: middle;
text-align:center;

}

它在 Firefox、Chrome 和 Edge 中的显示方式相同。

谢谢你能给我的任何答案。

【问题讨论】：

标签： html css webiopi

【解决方案1】：

我认为您的问题是基于百分比的高度。将其更改为像素并遵循this great answer 的一些其他提示。

input[type=range] {
  width: 10px;
  /* Specific width is required for Firefox. */
  height: 100px;
  background: transparent;
  /* Otherwise white in Chrome */
  /*transform: rotate(-90deg);*/
  -webkit-appearance: slider-vertical;
  vertical-align: middle;
  text-align: center;
  writing-mode: bt-lr;
}

<div>
  <input id="volSlider" class="asrange" type="range" min="0" max="30" orient="vertical" />
</div>

【讨论】：