最新版本的Chrome中的文本输入占位符是否已损坏？

Question

抱歉，除了屏幕截图之外，我无法提供有关此问题的任何信息，我目前无法使用Chrome在Windows上进行测试。

这就是占位符在Win7 Chrome上的样子：

一些相关的风格：

.field input, .field textarea {
  width: 100%;
}

input, textarea {
  background: #fbfbfb;
  padding: 15px;
}

input {
  line-height: normal;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  border: none;
}

label, input {
  display: block;
}

HTML：

<div class="field">
    <input id="cf-name" type="text" name="name" value="" placeholder="Name" autocomplete="off">
</div>

页面在这里：

http://dev.metertech.co.uk/contact-us

任何人都面临这个问题，知道发生了什么事吗？

Answer 1

您已将输入的行高设置为normal，但如果查看占位符伪类，则将它们设置为line-height: 2。所以你的占位符文本试图占据比输入的实际高度更高的高度，因此“切断”占位符文本。

要解决此问题，请从占位符中删除line-height属性。

您可能也不需要line-height:normal - 这是默认设置。

Answer 2

这是您的修复

input {
  line-height: 28px;
}