垂直对齐奇怪的 Chrome 行为答案

【问题标题】：Vertical align weird Chrome behaviour垂直对齐奇怪的 Chrome 行为
【发布时间】：2012-09-03 09:28:34
【问题描述】：

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

对于 Firefox，文本节点会忽略该属性。

这是一个 Chrome 错误吗？ Live example

<div>
  <input>
   text
</div>

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

【问题讨论】：

如果您将其更改为 text-top，则它会在 Chrome 中匹配。
我不明白你的意思，但据我所知，你正在对齐 div。这意味着， div 和里面的所有东西都将垂直对齐顶部。您的“文本”一词存在于输入标签之外，将其放在 div 标签中，与输入标签无关。因此，它将对齐顶部。我可能错了。
顺便说一句，你的问题中有一个额外的“>”标签。
垂直对齐：The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.w3.org/wiki/CSS/Properties/vertical-align
这看起来像一个 webkit 错误，因为所有其他浏览器似乎都按预期运行。 Vertical-align 不适用于框级元素，因此看起来 webkit 要么解释错误，要么试图提供帮助。

【解决方案1】：

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

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

【讨论】：