Firefox中Slider滑块出现贯穿中线的CSS异常问题求助

嘿，这个问题我之前帮人排查过，Firefox对<input type="range">的默认样式逻辑和Chrome、Edge不一样，那条贯穿的白线其实是Firefox自带的轨道分割线，咱们只需要针对性覆盖默认样式就能搞定。

问题根源 #

Firefox会给滑块轨道默认添加一条带分割效果的渐变背景，而你当前的CSS只重置了WebKit内核浏览器的样式，没有处理Firefox的专属轨道样式，导致这条白线残留了下来。

修改后的完整CSS代码 #

#slidecontainer { width: 100%; }
.slider { 
  -webkit-appearance: none; 
  width: 100%; 
  height: 25px; 
  background: #d3d3d3; 
  outline: none; 
  opacity: 1; 
  -webkit-transition: .2s; 
  transition: opacity .2s; 
  margin-bottom:10px; 
  border-radius: 5px; 
  /* 覆盖Firefox默认的渐变背景 */
  background-image: none;
}
.slider:hover { opacity: 1; }
.slider::-webkit-slider-thumb { 
  -webkit-appearance: none; 
  appearance: none; 
  width: 25px; 
  height: 25px; 
  background: #989898; 
  cursor: pointer; 
  border-radius: 5px; 
}
.slider::-moz-range-thumb { 
  width: 25px; 
  height: 25px; 
  background: #DFDFDF; 
  cursor: pointer; 
  border-radius: 5px; /* 补上圆角，和Chrome滑块样式统一 */
}
/* 完全接管Firefox的轨道渲染，消除默认分割线 */
.slider::-moz-range-track {
  background: #d3d3d3;
  border: none;
  border-radius: 5px;
}

关键修复点说明 #

• 给.slider添加background-image: none，直接覆盖Firefox默认的带分割线渐变背景
• 新增::-moz-range-track伪元素样式，明确设置轨道的背景色、无边框和圆角，完全替代浏览器的默认轨道渲染
• 顺便给Firefox的滑块补上圆角，让跨浏览器的视觉效果更统一

内容的提问来源于stack exchange，提问作者Greg