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

Question

我已经使用弹性框构建了一个表单，并且它在Firefox，Edge和IE11中运行得非常漂亮。

不幸的是，Chrome浏览器中的文本并不一致。如果后面跟着一个选择，那么很好，但是当输入后面的文本看起来与底部对齐而不是直线时。

我正在使用基线而不是中心来考虑可能不同的字体大小。在Chrome

正确的布局在FF

不正确的布局

我简化了我的代码，并发布到 http://codepen.io/rachelreveley/pen/jrmbJP

form, 
 
fieldset { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
label { 
 
    display: flex; 
 
    align-items: baseline; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
    padding: .3rem 0; 
 
    flex-wrap: wrap; 
 
} 
 
fieldset span { 
 
    text-align: right; 
 
    padding: 0 1rem 0 0; 
 
} 
 
input, 
 
select, 
 
textarea { 
 
    padding: .5rem; 
 
}

<form> 
 
    <fieldset> 
 
    <label> 
 
     <span>Label</span> 
 
     <input type="text" /> 
 
    </label> 
 
    <label> 
 
     <span>Label</span> 
 
     <select> 
 
     <option value="" selected="" disabled=""></option> 
 
     <option value="Mr">Mr</option> 
 
     <option value="Dr">Dr</option> 
 
     <option value="Miss">Miss</option> 
 
     <option value="Mrs">Mrs</option> 
 
     <option value="Ms">Ms</option> 
 
     <option value="Ms">Mx</option> 
 
     <option value="Other">Other</option> 
 
     </select> 
 
    </label> 
 
    </fieldset> 
 
</form>

Answer 1

您需要添加placeholder=" "对您的输入，他们会完全一致。

Answer 2

这是因为align-items: baseline;。而是使用​​

这里是更新codepen

form, 
 
fieldset { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
label { 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: row; 
 
    justify-content: flex-start; 
 
    padding: .3rem 0; 
 
    flex-wrap: wrap; 
 
} 
 
fieldset span { 
 
    text-align: right; 
 
    padding: 0 1rem 0 0; 
 
} 
 
input, 
 
select, 
 
textarea { 
 
    padding: .5rem; 
 
}

<form> 
 
    <fieldset> 
 
    <label> 
 
     <span>Label</span> 
 
     <input type="text" /> 
 
    </label> 
 
    <label> 
 
     <span>Label</span> 
 
     <select> 
 
     <option value="" selected="" disabled=""></option> 
 
     <option value="Mr">Mr</option> 
 
     <option value="Dr">Dr</option> 
 
     <option value="Miss">Miss</option> 
 
     <option value="Mrs">Mrs</option> 
 
     <option value="Ms">Ms</option> 
 
     <option value="Ms">Mx</option> 
 
     <option value="Other">Other</option> 
 
     </select> 
 
    </label> 
 
    </fieldset> 
 
</form>