我的文本框中的占位符文本在 chrome 中未对齐答案

【问题标题】：The placeholder text in my text boxes is mis aligned in chrome我的文本框中的占位符文本在 chrome 中未对齐
【发布时间】：2011-07-09 16:02:20
【问题描述】：

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

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

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

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

【问题讨论】：

标签： css forms textbox placeholder

【解决方案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

【讨论】：

【解决方案2】：

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

只要将它添加到您的 CSS 中，只要它适用于该电子邮件字段即可：

padding: 5px;

【讨论】：

【解决方案3】：

我认为你的 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;
}

导致问题。请记住，此声明适用于标签的内容，以及标签本身。当涉及到表单时，这可以帮助您..

【讨论】：