Chrome输入类型编号会进行裁剪

Question

当输入类型为数字时，Chrome会将输入框呈现不同的外观，框中的数字会进行底部修剪。有没有办法在不改变输入控件大小的情况下修复它？

任何帮助都将不胜感激。

See jsFiddle Link

文本和数字输入在Internet Explorer中呈现相同的外观。

<div class="container">
    <div class="small">
    <input type="number" placeholder="Number"  value="8" class="form-control  input-xs">
        <br/>
    <input type="text" placeholder="Text" value="8" class="form-control  input-xs">
   </div>
</div>



input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}
.input-xs {
    height: 22px;
    padding: 5px 5px;
    font-size: 10px;
    line-height: 1.5;
    border-radius: 3px;
}

Answer 1

line-height类的input-xs正在弄乱它。 如果你拿走它看起来没问题。这必须是因为并非所有浏览器都在line-height内支持input。

  

虽然Chrome和Safari尊重输入的行高值，但   Firefox，Internet Explorer和Opera都没有。

From here...

.input-xs {
    height: 22px;
    padding: 5px 5px;
    font-size: 10px;
    /*line-height: 1.5; or set to 'line-height: 1'*/
    border-radius: 3px;
}

See Fiddle