垂直对齐奇怪的Chrome行为

Question

我刚注意到 Chrome 的奇怪行为。 将垂直对齐属性应用于div，其中的文本节点也是对齐的。

使用 Firefox ，文本节点会忽略该属性。

这是Chrome错误吗？ Live example

<div>
  <input>
   text
</div>

div{
    vertical-align:top;
    font-size: 11px;
}

Answer 1

这似乎是将vertical-align：top应用于div的预期行为。如果您想要一个简单的修复，只需将行高应用于div，即输入框高度的div。这将使文本垂直居中于输入的右侧。

div {
  vertical-align: top;
  font-size: 11px;
  line-height: 16px;
}