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

Question

我刚刚注意到 Chrome 有一个奇怪的行为。将 vertical-align 属性应用于 div，其中的文本节点也对齐。

在 Firefox 中，文本节点将忽略该属性，这是它应该做的。

这是一个 Chrome 错误吗？ Live example

<div>
  <input>
   text
</div>

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

Answer 1

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

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