css - 不同的输入类型(时间、数字)在 chrome 中有不同的高度

Question

我正在尝试使用具有不同类型属性但高度不同的输入元素。例如，在 chrome 输入中，type:time 看起来比 type:number 更高。我已将其简化为最基本的结构来说明问题:http://jsfiddle.net/4jteqy1f/

HTML

<article class="settings">
    <ul>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="number" value="286">
        </li>
    </ul>
</article>

CSS

.settings ul li{
    display: inline-block;
    padding:5px;
    background-color: #dee7f8;
}

在示例中，类型数字的输入看起来比其余输入字段小，至少在 chrome 中是这样。它在最新的 Internet Explorer 中看起来很好以进行更改。为什么会发生这种情况，可能的解决方案是什么？

Answer 1

您可以将这一行添加到您的 CSS 中:

input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

基本思路是为向上和向下按钮提供足够的空间，即 20px，然后 vertical-align: middle 影响值(它不会影响 DOM 元素，如箭头，虽然)

查看代码并尝试调整大小，以便了解其工作原理

.settings div li{
	display: inline-block;
    padding:5px;
	background-color: #dee7f8;
}
input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

<article class="settings">
    <div>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input value="286">
        </li>
    </div>
</article>