输入占位符行高问题

Question

有什么问题？

如上图所示，有一个高度为36px的输入框。 在IE10中，占位符不是垂直中间的。

Answer 1

对于所有输入，只需提供

line-height:normal;

它将采用正常的行高，并且可以在所有浏览器中正常工作。

Answer 2

我通常会将高度和行高设置为输入[type = text] ，并将这些属性继承到 :: placeholder 。

height: inherit;
line-height: inherit;

Answer 3

您可以使用waterwark js来解决此问题。

http://jsfiddle.net/maxim75/yJuF3/

查看小提琴。

<input type="text" id="Text1" />

Answer 4

对于那些迟到的人 - 我找到了一个在Twitter Bootstrap（3.1）中运行的解决方案，以及我运行的其他一些测试。

只需添加到输入元素：

height: inherit;
vertical-align: middle;

Answer 5

<强>解决方案：

将相同的36px行高应用于输入[type =“text”]。

副作用：

在给出行高之前：36px它在所有浏览器中都运行良好。正如我申请 36px行高输入[type =“text”]，下面是Safari中发生的事情：

第二个解决方案：

使用IE hack应用行高。 如下

input[type="text"] {
    line-height: 36px\9; // CSS Hack only for IE.
}

Answer 6

在Firefox上为占位符添加行高专门解决了该问题。否则，将line-height添加到::placeholder会破坏Safari。

  &::-moz-placeholder {
    line-height: 36px; // this should be equal to height of the input
  }

Answer 7

几乎在每种情况下，line-height:normal;的公认答案都对我有用。但是，当以px为单位指定输入高度时，Firefox仍然给我带来了问题。我最终需要为此定位浏览器。我使用了WordPress全局$ is_gecko，但针对其他平台的解决方案还有很多其他解决方案，它们可以针对具有类的浏览器，与使用任何-moz hacks相比，我发现这是更持久的解决方案。它吸引了特定的浏览器，但有时是必需的。

不知道为什么，但是line-height: revert;在Firefox中似乎可以使用。好像主input具有line-height: normal，然后将占位符显式设置为line-height: normal也应具有与line-height: revert完全相同的效果，但似乎不起作用ff。

input.special-field {
    height: 48px;
    line-height: normal;
}
input.special-field::placeholder {
    height: inherit;
    line-height: normal;
    vertical-align: revert;
}
.gecko input.special-field::placeholder {
    line-height: revert;
}

Answer 8

尝试使用它：

vertical-align:middle;