6

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 ?

gunr2171
  • 16,104
  • 25
  • 61
  • 88
Adriano
  • 19,463
  • 19
  • 103
  • 140
  • Note that CSS Reset & Normalizer have nothing to do with this question. Indeed, even if you add a CSS Reset in this example, the behavior is different, see by yourself on http://jsbin.com/vecugikuyivo/1/edit – Adriano Oct 17 '14 at 14:25
  • 2
    CSS reset/normalization stylesheets are _supposed_ to provide cross-browser consistency in terms of layouts, fonts, sizing, etc. However, I've tried 6 different ones thus far, and while they all succeed at various things, none of them work for this particular problem. So, great question! I've +1'd and favorited it, because I would love to see an answer referencing a specific stylesheet that actually normalizes that input's height across all browsers... – Troy Gizzi Oct 17 '14 at 14:52
  • +1 for testing the 6 different resets/normalizers – Adriano Oct 17 '14 at 15:02
  • Have your tried CSS reset or CSS normalizer? – GibboK Oct 20 '14 at 14:07

1 Answers1

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.

A F
  • 7,424
  • 8
  • 40
  • 52