HTML: is input box default/calculated content height different across browsers

Question

Let's say I have the following code

.username {
  font-size: 30px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 2px solid #E0E0E0;
}

<input class="username" type="text" />

See live demo on http://jsbin.com/qudorugoguya/1/edit?html,css,output

I understand that the total height = content height + padding-top + padding-bottom + (border-width x 2).

http://www.w3.org/TR/CSS21/box.html#box-dimensions

However, when the height property is not assigned a value, it seems like the calculated content height changes from browser to browser. As if it was the result of the font-size + some arbitrary number of pixels proportional to the font-size.

For different browsers content height has the following values:

• Chrome 38: 34px
• Firefox 33: 35px
• IE 11: 34.5px
• IE 8: 35px

Note: I got the values from each browsers' built-in developer tool

Is there any way to get consistent values from browser to browser without setting the height property nor the line-height property ?

Answer 1

Nope, there is no way of doing it besides the methods you have mentioned. Even CSS resets/normalizers will use these methods behind the scenes.

If cross browser content heights are very important to you, I suggest using images.