Html 输入占位符行高问题

什么问题？

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

请尝试使用以下方法：

vertical-align:middle;

---

您可以使用WaterBark js解决此问题

看看小提琴

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

---

对于这么晚才来的人，我找到了一个在Twitter引导（3.1）和我运行的一些其他测试中都能工作的解决方案

只需添加到输入元素：

height: inherit;
vertical-align: middle;

---

对于所有输入，只需给出

line-height:normal;

---

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

我通常为输入[type=text]设置一个高度和行高，并将这些属性继承到：：占位符

height: inherit;
line-height: inherit;

---

解决方案：

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

副作用：

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

第二种解决方案：

使用IE hack应用线条高度。 具体如下

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

---

在Firefox上为占位符添加行高专门解决了这些问题。否则，将

行高添加到
：：占位符将中断Safari

&:：-moz占位符{
行高：36px；//这应该等于输入的高度
}
公认的
线高回答：正常几乎在任何情况下都能为我工作。但是Firefox在px中指定输入高度时仍然给我带来问题。我最终需要针对浏览器进行此操作。我使用了WordPress global$is_gecko，但是有许多其他平台的解决方案，用于针对浏览器的类，我发现这是比使用任何
-moz
黑客更持久的解决方案。针对特定的浏览器，它很糟糕，但有时是需要的

不确定原因，但
行高：还原
似乎在Firefox中工作。似乎如果主
输入
具有
行高：正常
，那么将占位符显式设置为
行高：正常
也应该具有与
行高：还原
完全相同的效果，但在ff中似乎不起作用

input.special-field{
高度：48px；
线高：正常；
}
input.special字段：：占位符{
身高：继承；
线高：正常；
垂直对齐：还原；
}
.gecko输入.特殊字段：：占位符{
行高：还原；
}
您可以发布应用于输入的css吗？如果使用行距：尝试在不需要行距的文本中添加
垂直对齐：中间
，共享您的完整代码是否加载了某种重置css？如果不是，也许你应该。垂直对齐：中间在这里不起作用，我用的是bootstrap 2.3.2 css。我从中了解到的是，如果我们给输入指定高度，我们需要设置行高度，以便在IE10中使其垂直居中。我对占位符的垂直对齐有问题，我想您已经分享了上面关于占位符的演示。是的，仅仅在输入标记中添加占位符属性并不能保证它在每个浏览器上都完全对齐。如果你愿意的话，你可以选择水印JS解决方案。那么为什么正常不是我通常做的标准
行高：inherit，但这是一个更好的策略！