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;
}
{
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" />
<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ć ?
i powiem więcej wystarczy jakikolwiek doctype żeby działało 
