WebKit отображает текст на входе выше, чем в div - PullRequest
Новая
       21

WebKit отображает текст на входе выше, чем в div

0 голосов
/ 01 сентября 2018

Я пытаюсь нормализовать поле input, чтобы оно отображалось как div, давая элементам одинаковую высоту как в Firefox, так и в WebKit. Когда я заметил, что WebKit будет отображать 16px/16px текст 18px в высоту, тогда как Firefox будет правильно отображать его 16px.

Что вызывает эту разницу в высоте и как ее устранить? 

console.log(document.querySelector("div").offsetHeight)
console.log(document.querySelector("input").offsetHeight)
div,
input {
  font: 16px/16px Arial;
}

input {
  padding: 0;
  border: 0;
}
<div>Lorem Ipsum</div>
<input type="text" value="Lorem Ipsum" />

1 Ответ

0 голосов
/ 03 сентября 2018

Проблема в том, как высота строки различается на входах между Firefox и Chrome.

Просто сброс высоты строки решит проблему: 

line-height: normal;


console.log(document.querySelector("div").offsetHeight)
console.log(document.querySelector("input").offsetHeight)
div,
input {
  font: 16px Arial;
  line-height: normal;
}

input,div {
  padding: 0;
  border: 0;
}
<div>Lorem Ipsum</div>
<input type="text" value="Lorem Ipsum" />

Чтобы объяснить немного больше о том, как Chrome показывает ввод, я должен сказать, что он связан с "Chrome имеет минимум высоты строки на входах".

Например, если вы установите высоту строки в 17px и размер шрифта в 16px, проблем не будет.

подробнее

...