wymiarowanie elementów Opcje

[sazian]

Witam,
mam pewien dziwny problem z ustawienie wysokości inputa
może najpierw kod

Kod

div
{
    margin:0;
    padding:0;
    border:2px solid #0f0;
    float:left;
    height:20px;
}
input
{
    margin:0;
    padding:0;
    border:2px solid #f00;
    float:left;
    height:20px;
}

i HTML

Kod

<div>aaaaaaa</div>
<input type="text" value="aaaaaaa" />

no i teraz wydawało by się banalne pytanie: ile wynosi sumaryczna wysokość dla każdego z elementów (diva i inputa)?

ja bym policzył tak: margin(top+bottom)+border(top+bottom)+padding(top+bottom)+height
czyli dla diva (0+0)+(2+2)+(0+0)+20 czyli razem 24 i tak pokazują wszystkie przeglądarki,
a dla inputa ? identycznie ? (0+0)+(2+2)+(0+0)+20 = 24 ?
Otóż nie wszystkie przeglądarki pokazują 16 czyli (height+margin(top+bottom))-(border(top+bottom)+padding(top+bottom))

co ciekawe jak wstawiłem kod tutaj http://jsfiddle.net/nassJ/1/ to działa dobrze ale jak zapiszę go jako plik html to zachowuje się właśnie w taki dziwny sposób.

co może być przyczynom takiego zachwiania i jak to ewentualnie naprawić ?