css - 我的文本框中的占位符文本在 chrome 中未对齐

Question

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

单击“反馈”，您会看到占位符中的文本居高不下。我有一个占位符脚本，但是当它意识到 chrome 支持占位符时它会关闭。

只是为了证明这一点，这里有一个表单本身的 jsfiddle：http: //jsfiddle.net/RAANa/

必须是CSS的东西。有任何想法吗？

Answer 1

line-height:28px从下面的 CSS 中删除。

.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

我认为您的 line-hight: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;