html 旋转时 <input type='range'> 上的宽度和高度错误

Question

这是一个简单的问题示例。我想在 table 中图像的底部和左侧放置一个滑块。它在底部效果很好，但是当滑块旋转时，样式命令中的高度和宽度参数需要反转。这似乎是滑块本身的错误。我只是把它放在 table 中以显示问题。 table 单元格中的宽度太宽了！ Link 至此网页：https://s3.amazonaws.com/berry-genealogy/index2.html 由于某种原因，下面的显示不显示 table 边框或滑块。点击上面的link查看实际页面，是打开到public.

<pre>
<!DOCTYPE html>
  <html>
    <body>
      <table border="1">
        <tr> 
          <td>
            <input type='range' style=`width:5px;height:150px;transform:rotate(var(--r,90deg));`>
          </td>
          <td>
            <img height=150 src="https://s3.amazonaws.com/berry-genealogy/00092_0.jpg"
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type='range' style=`width:100px;height:10px;transform:rotate(var(--r,0deg));`>
          </td>
        </tr>
      </table>
    </body>
  </html>
</pre>

Answer 1

根据此 MDN post https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range transform 可用于旋转输入滑块，前提是它被包裹在 div 中以帮助渲染后调整大小.此代码段添加了必需的 css 并显示了效果：

.slider-wrapper {
  display: inline-block;
  width: 24px;
  height: 150px;
  padding: 2px;
}

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

<table border="1">
<tbody><tr> 
    <td ><div class="slider-wrapper"><input type="range" ></div></td>
    <td><img src="https://s3.amazonaws.com/berry-genealogy/00092_0.jpg" <="" td="" height="150">
</td></tr>
<tr>
    <td></td>
    <td><input type="range"></td>
</tr>

</tbody></table>

这个 SO 问题 How to display a range input slider vertically 有一个简单解决方案的答案，但（根据 MDN）它可能只在 FF 中可靠。它在输入标签内使用 non-standard 属性 orient="vertical" :

<table border="1">
<tbody><tr> 
    <td ><input type="range" orient="vertical"></td>
    <td><img src="https://s3.amazonaws.com/berry-genealogy/00092_0.jpg" <="" td="" height="150">
</td></tr>
<tr>
    <td></td>
    <td><input type="range"></td>
</tr>

</tbody></table>

上面的 MDN link 对此问题进行了很好的讨论，并提出了涵盖浏览器实现之间差异的建议。

Answer 2

你可以这样做

    <style>
        .td1 {
            width: 20px;
        }

        .slide {
            transform: rotate(90deg);
            padding: 0px;
            margin: 0 auto;
            position: absolute;
            left: -42px
        }
    </style>
    <tr>
        <td><input class="slide" type='range'></td>
        <td><img height=150 src="img/1.jpeg"></td>

    </tr>
    <tr>

        <td class="td1"> </td>
        <td><input type='range' style="transform:rotate(var(--r,0deg));"></td>

    </tr>



</table>

html 旋转时 <input type='range'> 上的宽度和高度错误

html width and height bug on <input type='range'> when rotated

html

input

range