Q:

WebKit renders text in input higher than in div

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

A:

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

