WebKit renders text in input higher than in div

Question

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

Answer 1

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