Chrome 输入类型编号呈现修剪

Question

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

如有任何帮助，我们将不胜感激。

文本和数字输入在 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

input-xs class 的 line-height 搞砸了。如果你把它拿走，它看起来还不错。这一定是因为并非所有浏览器都支持 input.

中的 line-height

While Chrome and Safari respect line-height values on inputs, Firefox, Internet Explorer, and Opera do not.

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

Chrome 输入类型编号呈现修剪

Chrome input type number renders trimmed

html

css

webkit

google-chrome