html - chrome (webkit) 上输入类型 ='range' 的对齐问题

Question

我在 chrome 中设置样式输入范围 slider 时遇到了一些对齐问题。它在 Firefox 上运行良好。

这是 fiddle .

HTML:

<div class='container'>
    <div class='box'></div>
    <input type='range' class='range'/>
</div>

我已经给出了左边的框以供引用。在 Firefox输入控件与框垂直居中对齐，而在 chrome 中它与顶部对齐。

CSS:

.container {
    height: 80px;
    width: 220px;
    background-color: green;
    overflow: auto;
    padding: 10px;
}

.box {
    height: 20px;
    width: 20px;
    float: left;
    background-color: blue;
    margin-right: 5px;
}

input {
    float: left;
}

input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #b4b4b4;

}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 20px;
  cursor: pointer;
  background: #f0f0f0;
  margin-top: -6px;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: #b4b4b4;
}

input[type=range]::-moz-range-thumb {
  height: 20px;
  width: 8px;
  cursor: pointer;
  background: #f0f0f0;
}

我尝试为 webkit 添加一个 margin-top，但它在顶部给出了一个白色补丁，如更新后的 fiddle 所示。 .不知道为什么。

input[type=range]::-webkit-slider-runnable-track {
  margin-top: 6px;
}

有什么更好的主意吗？

Answer 1

只需从您在 css 中添加的输入中删除 float 属性:

input {
  float: left; 
}

它在 Chrome 和 Firefox 中都可以正常工作。