Javascript 范围更改将忽略css？

我有一个范围框，右边显示了它现在是哪个值，但是数字在范围栏下面一点，如何解决这个问题

这就是我想要的：

HTML/CSS/Javascript：

#ranger {
    vertical-align: middle;
    line-height:normal;
    margin-left:4px;
    margin-top:-10px;
}
input {
    width:246px;
    margin:2px 1px;
    padding:2px;
}

label {
    display : block;
}

label span {
    display : inline-block;
    width : 150px;
}

<input type="range" id="range" name="code" value="1" min="1" max="100" onchange="document.getElementById('ranger').innerHTML = document.getElementById('range').value;" /><span id="ranger">1</span>

#测距仪{
垂直对齐：中间对齐；
线高：正常；
左边距：4倍；
利润上限：-10px；
}
输入{
宽度：246px；
利润：2倍1倍；
填充：2px；
}
标签{
显示：块；
}
标签跨度{
显示：内联块；
宽度：150px；
}
1.

示例：

使用

display: inline-block;

我通常使用一个临时css轮廓来微调我的样式

selectors{
    outline: 1px solid red;
}

---

一种可能的解决方案是只设置

垂直对齐：top

：

改变

#ranger {
    vertical-align: middle;
...
}

#ranger {
    vertical-align: top;
...
}

---

哪个浏览器？铬。。firefox，IE？。

1

可能没有帮助，试试

1

Google Chrome yeah@RoryPicko92：好吧，现在洞号有点小了。请参阅完整CSS的编辑。我无法更改您问题中的范围滑块，因此我无法仔细测试它？@adeneo这将是范围滑块的图像。