我的文本框中的占位符文本在chrome中错误对齐

Question

我在Google Chrome中遇到问题，我的网站上的占位符文字太高了 http://www.myinvestmentdecision.com.au

点击“反馈”，您会看到占位符中的文字位于高位。我有一个占位符脚本，但当它意识到chrome支持占位符时它就会关闭。

只是为了证明这一点，这是形式本身的一个方面：http://jsfiddle.net/RAANa/

必须是CSS的东西。有什么想法吗？

Answer 1

从下方的css中移除line-height:28px。

.form input[type="text"], .form input.text, .form .calculate_box .calc {
background: transparent url(../images/input-background.png) repeat-x left top;
border: 1px solid #A1A1A1;
margin-left: -1px;
height: 28px;
line-height: 28px;
display: block;
width: 284px;
}

请参见随附line-height已移除的附加截图

Answer 2

我认为你的行高：28来自这里：（form.css）

.form { font-family: arial, sans-serif; }
.form input[type=text],
.form input.text,
.form .calculate_box .calc{
    background: transparent url(../images/input-background.png) repeat-x left top;
    border: 1px solid #a1a1a1;
    margin-left: -1px;
    height: 28px;
    line-height: 28px;
    display: block;
    width:284px;
}

导致问题。请记住，此声明适用于标记的内容以及标记本身。这可以帮助你了解表格..

Answer 3

不确定这是否是“正确”的方法，但是在输入字段中添加5px的填充将使电子邮件字段的占位符居中。

只需将其添加到适用于该电子邮件字段的CSS中：

padding: 5px;