html - texto - Elementos de alineación de Chrome: línea de base para elementos seleccionados y de entrada

propiedades hr

Question

Creé un formulario usando flex box y funciona muy bien en Firefox, Edge e IE11.

Desafortunadamente, en Chrome, el texto de los tramos no se alinea de forma consistente. Está bien si está seguido de una selección, pero cuando está seguido de una entrada, el texto aparece para alinearse en la parte inferior en lugar de la línea de base.

Estoy utilizando la línea de base en lugar del centro para tener en cuenta los tamaños de fuente potencialmente diferentes.

Diseño incorrecto en Chrome

Correcto diseño en FF

He simplificado mi código y publicado en 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

Es por align-items: baseline; . En su lugar use align-items: center;

Aquí está el codepen actualizado

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>

Answer 2

placeholder=" " agregar placeholder=" " a sus entradas y se alinearán perfectamente.