我想我做到了！
在我的测试中，似乎line-height必须至少约115％的字体大小，所以如果你想50px高元素你必须有〜43px的东西，所有排队：
图1.字体大小为50px线宽的86％。事情排列，但不遵守OP要求的50px字体大小。
input, span {
border: 2px solid red;
display: inline-block;
font: 43px Arial;
line-height: 50px;
padding: 0;
vertical-align: middle;
width: 100px;
outline-style:none;
box-shadow:none;
overflow:hidden;
/* optional - to include the borders in the element size:
box-sizing:border-box;
*/
}
Text
如果你将字体大小增加到所需的50px，那么输入框尊重的最小行高为〜58px。任何尝试用垂直对齐来抵消这种影响在输入中没有影响，但是我们可以修正元素高度并隐藏溢出，以给出一致的(虽然不完全可信的)外观：
图2. 50px文本强制的行高58px，它被截断与溢出隐藏。
input, span {
border: 2px solid red;
display: inline-block;
font: 50px Arial;
line-height: 58px;
padding: 0;
height:50px;
vertical-align: top;
width: 100px;
outline-style:none;
box-shadow:none;
overflow:hidden;
/* optional - to include the borders in the element size:
box-sizing:border-box;
*/
}
Text
关闭，但没有雪茄。但是这让我想到 – 也许一个伪元素可能不那么限制？我发现，你可以风格的输入::第一行伪甚至在一个输入，这将尊重高度，字体大小，行高和垂直对齐！
因此voilà！
图3.第一行伪元素的胜利！
input, span {
border: 2px solid red;
display: inline-block;
font: 50px Arial;
line-height: 50px;
height: 50px;
padding: 0;
vertical-align: middle;
width: 100px;
outline-style:none;
box-shadow:none;
overflow:hidden;
/* optional - to include the borders in the element size:
box-sizing:border-box;
*/
}
input::first-line, span::first-line {
vertical-align: middle;
}
/* weirdly the placeholder goes black so we have to recolour the first-line */
input::-webkit-input-placeholder::first-line {
color:grey;
}
Text
这里有一个jsFiddle的很多，所以你可以看到我的工作。 😉
