html - 垂直方向に配置する Chrome の奇妙な動作

Question

Chromeの奇妙な動作に気付きました。vertical-align プロパティを div に適用すると、その中のテキスト ノードも整列されます。

Firefox では、テキスト ノードはプロパティを無視する必要があります。

それはChromeのバグですか？ 実際の例

<div>
  <input>
   text
</div>

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

Answer 1

これは、vertical-align: top を div に適用した場合の予想される動作のようです。簡単な修正が必要な場合は、入力ボックスの高さである div に line-height を適用するだけです。これにより、テキストが入力の右側に垂直方向に中央揃えになります。

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