垂直对齐奇怪的Chrome行为

Question

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

使用Firefox,文本节点忽略了应该执行的属性.

这是Chrome的错误吗？ 实例

<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;
}