Я использую Bootstrap 3.4 для стилизации формы. В Chrome 74 все выглядит правильно, но в Firefox 66 вертикальное выравнивание значения в поле даты html отключено. Вместо того, чтобы быть отцентрированным, он выравнивается по нижней части поля. Я проверил поле с помощью инструментов разработчика, и он показывает то же заполнение, что и в Chrome, но значение не содержится в заполнении.
Это происходит только с полем даты. Стандартное поле ввода работает нормально.
Вот ссылка на CodePen, которая показывает, о чем я говорю:
https://codepen.io/bhazardous/pen/ZNKzJd
Во время написания этого вопроса я выяснил, что именно вызывает смещение, и как это исправить. Мне просто интересно, может ли кто-нибудь объяснить, почему это происходит, и я подумал, что этот вопрос может пригодиться кому-то еще в будущем.
Класс контроля формы начальной загрузки определяет
.form-control {
padding: 6px 12px;
}
aka
.form-control {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
}
Я обнаружил, что именно тот факт, что указан верхний и нижний отступы, является причиной смещения в Firefox. Если я уберу верхний и нижний отступы, поле будет отображено со значением по центру в Chrome и Firefox.
.form-control {
padding-left: 12px;
padding-right: 12px;
}
Может кто-нибудь объяснить, почему это происходит?