Problème de rendu des polices / hauteur des lignes sur Mac/PC (en dehors de l'élément)

Question

La conception

Le contenu des widgets d'information doit être aligné verticalement au milieu comme tel :

---

La conception codée

Windows : Chrome 20 / FF 14 / IE 9

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

---

Le code

HTML

<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 question

En regardant les images ci-dessus de la conception codée, vous pouvez voir comment cela semble perturber l'alignement. En regardant de plus près, le texte est rendu à l'extérieur de l'élément sur le Mac.

Windows

Mac

---

Note

J'intègre les polices par le biais d'une feuille de style Google Web Fonts.

---

Testé

J'ai essayé ce qui suit :

• Définir les hauteurs de ligne sur chaque élément.
• Définir les poids de la police sur chaque élément.
• Définir des hauteurs sur chaque élément.
• Une combinaison de height/padding-top sur chaque élément.
• Utilisation de pourcentages/em/px pour le rembourrage.

Il semble que, quoi que j'essaie, le contenu ne sera jamais parfaitement aligné sur le mac et le pc.

---

Ma (mes) question(s)

Est-il possible de réaliser ce que j'essaie de faire de manière simpliste ?

Dois-je renoncer à la display:table-cell; et définir des hauteurs/espaces spécifiques sur chaque élément et enfant ? Je serai toujours confronté à des problèmes d'espacement entre les deux systèmes d'exploitation.

Dans quelle catégorie dois-je classer cette question ? Hauteur de ligne ? Cellules du tableau ? OS ? etc...

Merci d'avance !

Answer 1

Si le problème est résolu en utilisant une police différente (Arial), c'est que le problème vient de la police et non du CSS. Comme vous l'avez remarqué, le rendu des polices diffère selon les navigateurs.

Une solution possible serait de télécharger la police Cutive (je vois qu'elle a une licence SIL) et de la faire passer par le générateur de font-face Font Squirrel. En mode "Expert", il y a une option pour "Fixer les métriques verticales" qui pourrait être ce que vous recherchez.

Answer 2

Ma solution à ce problème (très ennuyeux) :

• Réglez tous les éléments sur float:left ;

• Définir des hauteurs de ligne explicites ;

Profitez d'une victoire sur le ridicule css des navigateurs et des plates-formes.

Answer 3

Une partie du problème peut provenir de la façon dont Windows/Mac OSX rend les polices. En particulier celles qui sont introduites via @font-face. Avez-vous essayé de changer le format des polices utilisées ?

Answer 4

J'ai été témoin du même problème, avec une police personnalisée (Trade Gothic) servie par FastFonts.

Windows a fait ce qu'il devait faire. Mais tous les autres navigateurs sur les machines basées sur Linux, Mac, iOS, Android ont souffert du problème.

Ma seule solution a été de faire correspondre l'agent de l'utilisateur et de nommer la balise body avec .not-win.

Mes styles pourraient alors remplacer la hauteur de ligne spécifique aux périphériques non-Windows.

Answer 5

Puisque vous avez dit dans votre commentaire à Jordan Brown que l'utilisation d'Arial rend l'alignement parfait, il s'agit d'un problème de police. Il est probable que la personne qui a créé votre police n'a pas défini la valeur Ascent correctement.

Si vous avez le TTF, téléchargez-le à FontSquirrel Sélectionnez l'option "Expert", puis conservez toutes les options par défaut. L'option qui corrige le problème est, je crois, "Fix Vertical Metrics", mais j'ai eu des problèmes lorsque j'ai modifié les options par défaut et je vous recommande de les conserver telles quelles.

Maintenant, la hauteur de ligne de la police est la même sur MAC et PC (cela a fonctionné pour moi).