如何为输入和相邻的内联块元素设置相同的行高？

Question

使用CSS

input, span {
    border: none;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
    font-family: arial, helvetica, sans-serif;
    font-size: 1em;
    line-height: 1em;
    margin: 0;
    padding: .2em;
    vertical-align: middle;
}

span {
    display: inline-block;
}

使用HTML

<input value="gfjS">
<span>gfjS</span>

导致输入渲染，在浏览器引擎上，线宽高于内联块元素，尽管两者都设置为相同的行高。

是什么原因造成的？如何在不明确设定高度的情况下克服这种行为？

我在jsfiddle.net/fiddleasec/df7S6/中添加了上述内容。

Answer 1

只需使用display: inline替换span：

span {
    display: inline; 
}

<强> Updated Fiddle