Question

我对chrome中的样式输入范围滑块有一些对齐问题。它适用于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中正常使用。

输入类型对齐问题=＆＃39;范围＆＃39; on chrome（webkit）

1 个答案: