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規則

使用供應商特定的選擇時（而不是屬性），他們必須對自己（或其他相同的供應商選擇） 。

否則解析引擎認爲選擇錯了，而忽略了整個規則..
（見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; 
}