¿Por qué este elemento de bloque en línea tiene contenido que no está alineado verticalmente?

Question

Oct 18, 2012, 10:41 AM

¿Por qué este elemento de bloque en línea tiene contenido que no está alineado verticalmente?

Encontré un extraño problema de CSS. ¿Alguien puede explicar por qué el cuadro que tiene contenido no está alineado verticalmente?

Si pones texto dentro del lapso con clase.divPutTextToFixIssue - Se alinea correctamente.

http://jsfiddle.net/KgqJS/88/

<div id="divBottomHeader">
    <div class="divAccountPicker">
       <span class="divPutTextToFixIssue"><span>                 
    </div>
    <div class="divAccountData">
        <span>Balance: $555</span>
    </div>
</div>

#divBottomHeader {
    background-color: #d5dbe0;
    height: 43px;
}
.divAccountPicker {
    display: inline-block;
    background: blue;            
    width: 200px;
    height: 40px;
}
.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
}