要解决不同浏览器中HTML范围滑块按钮的偏移量不同的问题，可以使用CSS样式来覆盖浏览器的默认样式。

以下是一个包含代码示例的解决方法：

HTML代码：

CSS代码：

/* 重置滑块的样式 */
input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  background: #ddd;
  outline: none;
  border-radius: 5px;
}

/* 设置滑块的样式 */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}

input[type="range"]:focus {
  outline: none;
}

/* 根据需要调整滑块的偏移量 */
input[type="range"]::-webkit-slider-thumb {
  margin-top: -5px;
}

input[type="range"]::-moz-range-thumb {
  margin-top: -5px;
}

在上述示例中，首先通过设置-webkit-appearance、-moz-appearance和appearance为none来重置滑块的默认样式。然后使用::-webkit-slider-thumb和::-moz-range-thumb选择器来设置滑块的样式。最后，使用margin-top属性来调整滑块的垂直偏移量，以使其在不同浏览器中具有一致的显示效果。

通过应用上述CSS样式，可以确保不同浏览器中HTML范围滑块按钮的偏移量保持一致。