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

Question

#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，这是slider1和slider2之间的唯一区别，但似乎slider2的宽度也发生了变化。为什么会发生这种情况？有办法阻止它吗？谢谢

Answer 1

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

#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" />