Firefox中奇怪的CSS错误

Question

我已将输入滑块和两个叠加框包装到div容器中。我已经适应了所有东西，到目前为止它看起来很好。尽管如此，我在Firefox中遇到了一个奇怪的抵消错误，它让我疯狂。 Firefox似乎总是将输入滑块偏移到右侧。我将输入滑块涂成紫色，以更清楚地显示此偏移。我怎么能阻止这个？

您可以在此处查看当前版本：http://jsfiddle.net/ZDLTQ/24/ 相应的div包装器名为.slider_wrapper，输入滑块为#range。 有什么我不考虑的吗？

Answer 1

问题在于

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;
}