Добавление ввода изменяет высоту другого ввода с отображением flex, когда установлено в em

Question

Вот рабочий пример: http://jsfiddle.net/0pxv3omh/6/

Эти два входа имеют различную высоту (, хотя она очень мала ):

Я не могу следить за поведением, у меня есть эта разметка:

<div class="control">
  <div class="horizontal-wrapper">
    <input class="control__slider" id="input-range-year" type="range" min="1" max="40" value="30" step="1">
    <input class="control__input" type="number" value="30">
  </div>
</div>

И я в основном продублирую его как родного брата, и высота меняется.

Я обнаружил, что удаляю этот вход

<input class="control__input" type="number" value="30">

Входные значения диапазона становятся одинаковыми по высоте.

Они также становятся одинаковыми по высоте, если я уберу дисплей сгибать Я не понимаю ни того, ни другого поведения.

Насколько я понимаю, два входа должны быть одинаковой высоты:

input[type="range"] {
    height: 0.66em;
}

И хотя em зависят от контекста, насколько я понимаю, они должны быть в одном и том же контексте.

Answer 1

Существует таблица стилей агента пользователя, которая устанавливает размер шрифта 13,3333 пикселей.Это из моего инспектора Chrome, из вашего jsfiddle:

input, textarea, select, button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0em;
    font: 400 13.3333px Arial;
}

Когда вы ссылаетесь на 0,66 em, ваш ожидаемый конечный результат составляет 8px.Вы ожидаете, что относительный размер шрифта будет 12px, так как он установлен в 16px для всего html, а затем умножен на 0.75em в оболочке калькулятора.однако таблица стилей пользовательского агента перезаписывает ваши 12px на 13.3333px, что дает окончательную расчетную высоту 8.8px.

При рендеринге элементов при рисовании не используется сглаживание (subградиенты пикселей для сглаживания краев) и полностью закрасит пиксель, основываясь на том, начинается ли элемент до или после половины пикселя.

Я не совсем уверен, почему существует два пикселя, как субпикселяРасчеты должны давать максимум один пиксель разницы, но я подозреваю, что это может быть некоторое относительное значение с границами или тенями.Фактически синие области имеют высоту 14px и 16px, тогда как элементы имеют размер 8.8px.

Answer 2

В CSS единица измерения em всегда связана с контекстом. Все родители влияют на выход ребенка. Если вы хотите убедиться, что расчеты основаны на размере шрифта вашего html-тега, вы должны использовать rem .

Таким образом, изменение кода на следующий должно дать гораздо более точные результаты.

input[type="range"] {
    height: 0.66rem;
}