Rendering czcionek / problem wysokości linii na komputerach Mac / PC (poza elementem)
Treść widżetów informacyjnych powinna być wyrównana w pionie w środku jako taka:
Kodowany projektWindows: Chrome 20 / FF 14 / IE 9Mac (Lion / Mt. Lion): Chrome / FFKodHTML<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° / 89°</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;
}
ProblemPatrząc na powyższe zdjęcia zakodowanego projektu, można zobaczyć, jak wygląda, że zrzuca wyrównanie. Po dalszym przeglądaniu tekst jest renderowany poza elementem na komputerze Mac.
WindowsProchowiecUwagaUmieszczam czcionki za pomocą arkusza stylów Google Web Fonts.
PrzetestowanyPróbowałem:
Ustaw wysokość linii na każdym elemencie.Ustaw wagi czcionek dla każdego elementu.Ustaw wysokość na każdym elemencie.Połączenie wysokości / wyściółki na każdym elemencie.Używane procenty / em / px do wypełnienia.Wygląda na to, że bez względu na to, co spróbuję, zawartość nigdy nie będzie idealnie dopasowana do mac i pc.
Moje pytania)Możliwe jest osiągnięcie tego, co próbuję zrobić w uproszczony sposób?
Czy powinienem zrezygnowaćdisplay:table-cell;
wyznaczyć trasę i ustawić określone wysokości / obicia na każdym elemencie i dziecku? Nadal będę miał problemy z dopełnianiem / odstępami między dwoma systemami operacyjnymi.
Do czego należy zaklasyfikować ten problem? Wysokość linii? Komórki tabeli? OS? itp...
Z góry dziękuję!