为什么填充会影响滑块的宽度?

Why does padding affect the width of a slider?

#slider1 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
}

#slider2 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
  padding: 0 50px;
}
<input type="range" orient="vertical" id="slider1" />
<input type="range" orient="vertical" id="slider2" />

slider2 中,我添加了填充 0 50px,这是 slider1slider2 之间的唯一区别,但它的宽度似乎是 slider2 也变了。为什么会这样?有办法阻止它吗?谢谢!

这似乎是特定于浏览器的,其效果如中所述。 Chrome 但在其他浏览器中没有。仅仅因为这种不一致,可能值得避免。使用 margin 而不是 padding 在滑块的任一侧创建 space,而不影响它的外观:

#slider1 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
}

#slider2 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
  margin: 0 50px;
}
<input type="range" orient="vertical" id="slider1" />
<input type="range" orient="vertical" id="slider2" />