El diseño

El contenido de los widgets de información debe alinearse verticalmente en el medio como tal:

El diseño codificadoWindows: Chrome 20 / FF 14 / IE 9

Mac (Lion / Mt. Lion): Chrome / FF

El códigoHTML

<div class="info">
    <div class="weather display clearfix">
        <div class="icon"><img src="imgs/icons/thunderstorms.png" align="Thunderstorms" /></div>

        <div class="fl">
            <p class="temperature">82&deg; / 89&deg;</p>
            <p class="conditions">Thunderstorms</p>
        </div>
    </div>
    <div class="time display">
        <p>11:59 <span>AM</span></p>
    </div>
    <div class="date display clearfix">
        <p class="number fl">23</p>
        <p class="month-day fl">Jun <br />Sat</p>
    </div>
</div><!-- //.info -->

CSS

.info {
    display:table;
    border-spacing:20px 0;
    margin-right:-20px;
    padding:6px 0 0;
}
    .display {
        background-color:rgba(255, 255, 255, .2);
        border-radius:10px;
        -ms-border-radius:10px;
        color:#fff;
        font-family:"Cutive", Arial, sans-serif;
        display:table-cell;
        height:70px;
        vertical-align:middle;
        padding:3px 15px 0;
    }
        .display p {padding:0;line-height:1em;}
        .time, .date {padding-top:5px;}
            .time p, .date .number {font-size:35px;}
            .time span, .display .month-day, .conditions {
                font-size:14px;
                text-transform:uppercase;
                font-family:"Maven Pro", Arial, sans-serif;
                line-height:1.15em;
                font-weight:500;
            }
            .display .month-day {padding-left:5px;}
            .icon {float:left;padding:0 12px 0 0}
            .display .temperature {font-size:24px;padding:4px 0 0;}
            .display .conditions {text-transform:none;padding:2px 0 0;}
    .lt-ie9 .display { /* IE rgba Fallback */
        background:transparent;
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
        zoom:1;
    } 

La cuestión

Al observar las imágenes anteriores del diseño codificado, puede ver cómo aparece para desajustar la alineación. Al seguir viendo, el texto se representa fuera del elemento en el mac.

Windows

Mac

Nota

Estoy incrustando las fuentes a través de una hoja de estilo de fuentes web de Google.

Probado

He probado lo siguiente:

Establecer alturas de línea en cada elemento.Establece los pesos de fuente en cada elemento.Establecer alturas en cada elemento.Una combinación de altura / acolchado superior en cada elemento.Usamos porcentajes / em / px para el relleno.

Parece que no importa lo que intente, el contenido nunca se alineará perfectamente entre Mac y PC.

Mis preguntas)

¿Es posible lograr lo que estoy tratando de hacer de una manera simplista?

¿Debo renunciar a ladisplay:table-cell; ¿Ruta y establecer alturas / rellenos específicos en cada elemento y niño? Todavía tendré problemas de relleno / espaciado entre los dos sistemas operativos.

¿En qué debería categorizar este problema? ¿Altura de la línea? Celdas de tabla? OS? etc ...

¡Gracias por adelantado!