不同浏览器中的HTML输入字段高度不同

现在的情况

在一个简单的网站上，我有一个具有固定高度的输入控件，其中有一个具有特定字体大小的文本。我希望该文本在输入字段的中间垂直对齐。但即使我使用了重置CSS（链接here https://github.com/necolas/normalize.css/）并设置-webkit-appearance to none它仍然没有居中。

您可以看到，对于 IE，顶部的填充更高，对于 iOS，情况更糟。还有 12 个像素填充。

一些代码

HTML:

<!-- time -->
<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px; inn" value="00:00"/>

CSS:

.meeting-time {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 37px;
    text-align: center;
    font-family: "roboto",sans-serif;
    font-style: normal;
    font-size: 37px;    
    font-weight: 300;
    background: yellow;
    vertical-align: middle;
    -webkit-appearance: none;
}

实际问题

如何拥有一个文本字段，其中文本对于所有浏览器都垂直对齐。

我知道这个问题已经被问过几次了，但所提出的解决方案直到现在才起作用。这可能是我想念的一些微不足道的事情。

该问题是由输入字段的组合引起的height属性与字体相结合。删除height将文本在输入字段内正确居中。

这可能是因为有些字符在 00:00 基线下方生长，例如字母 p、q 等，因此字体的垂直中心位于“00:00”垂直中心下方。字体大小包括在字体大小之上扩展的边界。检查下图中的顶部和底部方位线：

作为解决方案，我将删除高度并使用产生所需总高度的字体大小。

另请注意，37 像素的输入字段还包括 2 像素的边框大小（1 像素顶部边框和 1 像素底部边框），因此使用 35 像素字体大小更适合您的示例。