1

语境：

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

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;
}


故障：

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

在此处输入图像描述

在哪里？：

故障仅显示在 Google Chrome 上


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

更新

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

4

2 回答 2

1

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

html, body, button, input, select, textarea {
font-size: 12px;
/*line-height: 1.231; remove this*/
}
于 2013-07-27T05:14:55.563 回答
0

我以前从未见过这个故障，这似乎没什么大不了的，但是这就是我可以处理它的方法。我会在输入框中添加一个背景图像，文本中心在中心对齐。然后将其应用于<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

于 2013-07-26T16:41:05.093 回答