html - 如何为 input 和相邻的 inline-block 元素设置相同的行高？

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>

导致跨浏览器引擎的输入渲染，其行高略大于内联 block 元素，尽管两者都设置为相同的行高。

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

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

Answer 1

只需使用 display: inline 代替您的 span:

span {
    display: inline; 
}

Updated Fiddle