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