如何解决Chrome和Edge的拇指滑块垂直对齐问题？

Question

我想要拇指滑块大于轨道并且中间与它对齐。

我删除了默认样式：

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

添加新风格：

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #009fda;
cursor: pointer;
}

在Chrome中，这会让拇指偏离中心。

但对Edge来说似乎是正确的：

如果我添加一个margin-top来补偿：

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #009fda;
cursor: pointer;
**margin-top: -7px;**
}

它在Chrome中更正了它：

但是在Edge中打破它：

有没有办法申请只为Chrome应用margin-top属性？或者其他一些方法来达到同样的目标？

有关详细信息，请参阅CSS arcticale https://css-tricks.com/sliding-nightmare-understanding-range-input/：

  

垂直方向，拇指与Firefox中的轨道中间对齐，看起来在Edge中间对齐，尽管我在相同情况的多次测试中获得了非常混乱的不同结果，并且其边界顶部一旦我们在实际输入和拇指上设置-webkit-appearance：none，我们就可以设置滑块样式，-box与Chrome中曲目内容框的顶部对齐。

     

虽然Chrome的决定起初看起来很奇怪，但在大多数情况下都很烦人，而且最近甚至导致了破坏......边缘的事情（但稍后会更多），背后有一些逻辑。默认情况下，Chrome中曲目的高度由拇指的高度确定，如果我们以这种方式查看事物，则顶部对齐似乎不再是完全疯狂。

     

但是，我们经常需要一个比轨道高度大的拇指，并且中间与轨道对齐。我们可以在:: - webkit-slider-thumb pseudo上设置的样式中使用margin-top更正Chrome对齐。

     

不幸的是，通过这种方式，我们打破了Edge中的垂直对齐方式。这是因为Edge现在也应用了:: - webkit-slider-thumb设置的样式。

Answer 1

我们添加了对-webkit前缀的支持，因为它们在网络上流行（主要是移动版），并且通过支持它们，这为我们的用户提供了更好的体验。解决问题的方法只是使用-ms-thumb重置边距，因为Chrome不支持此功能：

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #009fda;
  cursor: pointer;
  margin: 7px; /* alignment fix for Chrome */
}

input[type="range"]::-ms-thumb {
  margin: 0; /* Reset margin in Edge since it supports -webkit-slider-thumb as well */
}

这会导致拇指的中心对齐，您可以在此处查看：http://jsbin.com/bawuhofuqa/edit?html,css,output

希望有所帮助，如果您有任何其他问题，请与我们联系。