Html Chrome对齐项目：选择和输入元素的基线

我用flex box构建了一个表单，它在Firefox、Edge和IE11中运行得非常好

不幸的是，在Chrome中，跨距中的文本没有一致对齐。如果后跟select，则可以，但如果后跟输入，则文本似乎与底部对齐，而不是与基线对齐

我使用基线而不是中心来解释可能不同的字体大小

Chrome中的布局不正确

FF中的正确布局

我简化了我的代码并发布到

表单，
字段集{
显示器：flex；
弯曲方向：立柱；
}
标签{
显示器：flex；
调整项目：基线；
弯曲方向：行；
调整内容：灵活启动；
填充：.3rem 0；
柔性包装：包装；
}
字段集跨度{
文本对齐：右对齐；
填充：0 1rem0 0；
}
输入，
选择，
文本区{
填充：.5rem；
}

标签
标签
先生
博士
错过
夫人
太太
Mx
其他

您需要将

占位符=“

添加到您的输入中，它们将完美对齐。

这是因为

对齐项目：基线。而是使用
对齐项目：居中

以下是最新的


表单，
字段集{
显示器：flex；
弯曲方向：立柱；
}
标签{
显示器：flex；
对齐项目：居中；
弯曲方向：行；
调整内容：灵活启动；
填充：.3rem 0；
柔性包装：包装；
}
字段集跨度{
文本对齐：右对齐；
填充：0 1rem0 0；
}
输入，
选择，
文本区{
填充：.5rem；
}

标签
标签
先生
博士
错过
夫人
太太
Mx
其他
你能解释一下原因吗？我试过了，效果很好！我只能想象Chrome在包含文本之前不会设置文本输入的基线。不过，如果不必在每一个输入上都加上这个，那就太好了。我正在建立一个有很多形式的网站。placeholder=”“没有空格，不起作用。可以在jQuery中使用$（'input'）.attr（'placeholder'，''）进行设置；所以你不必把占位符放在每一个地方。简直是疯了！只想添加占位符，通过开发工具添加占位符不会改变任何东西。加载页面时，占位符必须在那里。很抱歉，我应该提到，我已经排除了使用中心，因为我想绝对确保文本基线对齐。如果使用“中心”（center），如果任何文本的大小不同，基线最终会错位。