Question

上下文

我有一个<input>元素构造如下：

HTML：

<input

的 CSS：
（由Meyer在同一样式表中编写的reset.css样式表）

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

小故障：

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

enter image description here

其中：？

仅在Google Chrome上显示毛刺

问题：如何修复并避免这种情况发生？

更新

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*/
}

Answer 2

我之前从未见过这个故障，但这似乎不是什么大不了的事，但这就是我应对的方式。我会在输入框中添加背景图像，文本中心在中心对齐。然后将其应用于<input> css。当用户点击输入框时，background-image为none。像这样：

<html>
<head>
<style>
    #usernameInput{
        background-image: url(usernamePlaceholder.jpg);
    }
</style>
</head>
<body>
    <input id="usernameInput" type="text" name="">
    <script>
        $('#usernameInput').click(function(){
            $('#usernameInput').css({
                'background-image' : 'none'
            });
        });
    </script>
</body>
</html>

这是Jsfiddle

Chrome上的占位符故障

上下文

小故障：

其中：？

更新

2 个答案: