Nezarovnaný inline-block u více divů vedle sebe

Tady je živá ukázka na jsfiddle

Jde o jeden obalový div a v něm tři vnitřní inline-block divy s naznačenou vnitřní strukturou. Všechny mají nastavenou height: 36px;

První dva vnitřní divy se mi posouvají dolů a vyčuhují ven z toho obalového divu. Jen poslední div leží přesně v tom obalu.

Tady v tom fiddlu je to jen nepatrný rozdíl. Ale v originálu to je o půl výšky obalovýho divu seknutý dolů.
Když ale přepnu prohlížeč na režim IE7 tak je to podobný jako tady na tom fiddlu.

S největší pravděpodobností to nějak způsobuje ten textový obsah prvních dvou divů, ale nezdá se mi, že bych tam měl nastavovat nějaký position: absolute;, aby to fungovalo.

Str4wberry:
O problém s IE7. Ve svým originálu *zoom: 1; mám, jen jsem to nechtěl dávat sem, protože by se to tam zbytečně pletlo a stejně jsfiddle v IE7 nefunguje.

Line-height můžu vyzkoušet.

„Doporučil bych výšku nezadávat, ale použít místo ní právě line-height.“
Ale u čeho? U toho obalu nebo vnitřních divů? Nebo u všeho?

Zkoušel jsem nastavovat ten line-height a nedělá to vůbec nic. Navíc v reálu tam mám podobně málo textu jako v tý fiddle ukázce a i v ní samotný se to drbe, i když ne tolik, jako v reálu.
Ale neřekl bych, že větší nebo menší počet textu má na to nějaký vliv. I v originálu mám jen jednořádkový texty v těch divech. Když tam nějakej text je, je to takhle (trošku víc) rozhozený a je to ok srovnaný jen když veškerej text dám pryč.

quatzael:
„Zkoušel jsem nastavovat ten line-height a nedělá to vůbec nic.“
Omylem jsem to přiřadil jinýmu elementu, takže to nic nedělalo.
Hejbe se to, ale zároveň to posouvá ten text dolů, bylo by to asi složitý vyrovnávat.

margin:
vertical-align: top; je to pravý!! Že mě to nenapadlo..

Supr, moc dík!!