我已将输入滑块和两个叠加框包装到div容器中。我已经适应了所有东西,到目前为止它看起来很好。尽管如此,我在Firefox中遇到了一个奇怪的抵消错误,它让我疯狂。 Firefox似乎总是将输入滑块偏移到右侧。我将输入滑块涂成紫色,以更清楚地显示此偏移。我怎么能阻止这个?
您可以在此处查看当前版本:http://jsfiddle.net/ZDLTQ/24/
相应的div包装器名为.slider_wrapper
,输入滑块为#range
。
有什么我不考虑的吗?
答案 0 :(得分:0)
问题在于
input[type=range],
input[type=range]::-webkit-slider-thumb
css rule
当使用特定于供应商的选择器( not properties )时,它们必须独立(或其他相同供应商选择器)。
否则解析引擎认为选择器错误并忽略整个规则。
(请参阅Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?了解更多)
尝试
input[type=range] {
-webkit-appearance:none;
margin:0; padding:0; border:0;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
margin:0; padding:0; border:0;
}