HTML / CSS：输入元素在直接兄弟节点上打破vertical-align

Question

我偶然发现了一个奇怪的CSS行为。看看这个：

＆＃13;

＆＃13;

span {
  line-height: 50px;
}

form label {
  line-height: initial;
  vertical-align: bottom;
}

label span {
  vertical-align: top;
}

label input {
  vertical-align: top;
}

＆＃13;

<form name="test">
  <span><label>Some label<span>foo</span><input></label></span>
</form>

＆＃13;

＆＃13;

＆＃13;

更改垂直对齐可以正常工作＆＃34;某些标签＆＃34;在input上，但任何内嵌框是input元素的直接兄弟，无法在行框中垂直移动。

尝试更改vertcal-align foo的{​​{1}}，您会看到奇怪的行为。如果您将label span替换为任何其他内联级别框，则会返回到预期的行为。

我尝试将<input>的所有CSS属性复制到<input>，但却无法传达相同的效果。