html - 垂直对齐奇怪的 Chrome 行为

Question

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

使用Firefox时，文本节点会按照应有的方式忽略该属性。

是 Chrome 错误吗？ 活生生的例子

<div>
  <input>
   text
</div>

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

Answer 1

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

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