html - Chrome 上的占位符故障

Question

上下文:

我有一个 <code><input</code>>元素构造如下:

HTML:

<div class="field field-3">
    <span><input type="text" placeholder="Username" name=""></span>
</div>

CSS:
(与 Meyer 在同一样式表中编写的 reset.css 样式表)

.field {
    padding: 20px 10px;
    position: relative;
    overflow: hidden;
}

.field > span {
    background-color: #fff;
    border: 1px solid #bbc3d3;
    float: right;
    padding: 8px 15px;
    position: relative;
}

.field > span input[type="text"] {
    background-color: transparent;
    border: 0 none;
    color: #9da3af;
    display: block;
    font-family: $font-open;
    @include font-size(12px);
    margin: 0;
    outline: 0 none;
    overflow: hidden;
    padding: 3px 0;
    resize: none;
    width: 838px;
    height: 22px;
}

故障:

第一张图片中显示的输入元素占位符。 当我在元素内部单击并写入内容时，文本会向下移动一个像素。

在哪里？

故障仅在谷歌浏览器上显示

问题:我该如何解决并避免这种情况发生？

更新

A koala_web建议，使用jsFiddle ( link ) 来举例说明。
注意:具有讽刺意味的是，在 jsFiddle 中问题没有出现，但我将链接指向出现故障的模板示例 ( link)。

Answer 1

尝试从 style.css 文件的第 297 行中删除行高声明

html, body, button, input, select, textarea {
font-size: 12px;
/*line-height: 1.231; remove this*/
}