为什么填充会影响滑块的宽度?
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
,这是 slider1
和 slider2
之间的唯一区别,但它的宽度似乎是 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" />
#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
也变了。为什么会这样?有办法阻止它吗?谢谢!
这似乎是特定于浏览器的,其效果如中所述。 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" />