This is a tricky way but works in the same way in the FF2-3 and IE6-7.
It totally depends from font-size of the form elements, that must be represented with pixels.
The font-size of the form elements is inherited from the UA setting and must be set implicitly. What does it mean?
The default UA setting for font-size is 16px, but for the form elements this 16px is the line-height and the font-size is 83.35% (13.3333px) of this value.
If you instantiated the font-size for the body: 75% of the UA setting (12px if default is 16px), the font size of the form elements is still 13.3333px.
But if you set the UA font-size for example: 18px; the font size of the form elements will be 15.33px, and the line-height will be 18px.
| Font size (px) | Value of the 'height' (px) |
| 8 | 19 |
| 9 | 20 |
| 10 | 21 |
| 11 | 22 |
| 12 | 23 |
| 13 | 24 |
| 14 | 25 |
| 15 | 26 |
| 16 | 28 |
<div class="line">
<img src="images/print.png" />
<input type="button" value="Input Button" />
<span class="spn">Span</span>
<select><option>Select</option><option>second</option></select>
<button>Button</button>
<input type="submit" value="Input Submit" />
<img src="images/print.png" style="height:20px;" />
<input type="text" value="Input Text" />
</div>
<style>
.line{background:beige;}
.line input, .line select, .line button {font:size:13px;}
.line input,.line select,.line button,.line img,.line span{vertical-align:middle;}
</style>
Span
Now I want that my <div class="line"> has for example the height: 40px.
The font-size of the form elements is: 13px, their height is: 24px. To make the height of the 'div class="line"' 40px I calculate: (40px - 24px) / 2 = 8px.
This 8px value I need to use for the padding-top and the padding-bottom of the <div class="line">.
<style>
.line{background:beige;padding:8px 1em;}
.line input, .line select, .line button {font:size:13px;}
.line input,.line select,.line button,.line img,.line span{vertical-align:middle;}
</style>
Span
See the screen shot with the Firebug and the Developer Tool calculated value of the '.line height'.