输入标签上的 Flexbox 垂直对齐问题

Question

基本上，我有一个 label 和一个文本 input 在弹性框中相互内联，input 弯曲，align-items 设置为基线。 input 弯曲以正确填写包含 div，但 label 与 input 的底部对齐，而不是文本基线应位于的位置。

这个问题出现在 Chrome 中，可能还有其他 WebKit 浏览器。

这是代码。 You can check out how it renders in this Codepen.

HTML：

<div>
  <label>Email:</label>
  <input type='text' />
</div>

CSS：

div{
  width:20rem;
  background:#999;
  padding:.5rem;

  display:flex;
  align-items:baseline;
}

input{
  flex:1;
}

如果注释掉display: flex，则对齐是正确的，但自然不再弯曲了。

如何在不使用 align-items: center 之类的 hack 的情况下解决此问题？

注意：我最初在另一个问题中发布了这个问题和答案，它已被删除。我已按照建议对其进行了修改，希望它现在符合准则。

Answer 1

添加到其他答案，如果您不想实际显示任何占位符文本，<input type="text" placeholder=" "> 效果很好。

Answer 2

基本上，如果input 上不存在value 或placeholder 属性，布局引擎会将input 的基线解释为input 的底部，而不是文本基线应位于的位置是。

所以修改后的 HTML 如下所示：

<div>
  <label>Email:</label>
  <input type='text' value='example@gmail.com' />
</div>

或

<div>
  <label>Email:</label>
  <input type='text' placeholder='example@gmail.com' />
</div>

这是布局引擎的错误，已通知开发人员。 You can read more about the bug here.