0

I'm attempting to normalize an input field to display as a div, giving the elements the same height in both Firefox and WebKit. When I noticed that WebKit will render a 16px/16px text 18px high, while Firefox will correctly render it 16px.

What is causing this height difference and how do I remove it?

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" />
Rasmus Nørskov
  • 478
  • 1
  • 6
  • 20

1 Answers1

4

It is a problem about how line-height renders different on inputs between Firefox and Chrome.

Just resetting the line-height will resolve the issue:

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" />

To explain a little more about the way that Chrome shows the input I've got to say it is related to "Chrome has a minimum for line-height on inputs".

For example, if you set line-height to 17px and font size to 16px there won't be any issues.

more info

Saeed
  • 2,169
  • 2
  • 13
  • 29
  • You've missed this construct: `font: 16px/16px` in original message. It translates to `font-size: 16px; line-height: 16px` thus TS already set line-height to desired value. – c-smile Sep 03 '18 at 18:46
  • 1
    yep. changed the answer. but it remains the problem with how WebKit renders line height on inputs – Saeed Sep 03 '18 at 18:48