Wygląda na to, że chrome zaokrągla wartość obliczonego line-height.Zaokrąglenie linii wysokości
Na przykład:
line-height:1.33 z font-size:11px będą miały obliczane line-height:14px.
Podczas gdy dokładna wartość jest 14.66 więc chciałbym oczekiwać, że line-height równa 15px
Wiesz, czy istnieje jakikolwiek sposób zmusić przeglądarkę do zaokrąglić obliczoną wartość zamiast okrągły dół?
Chrome obcina liczby dziesiętne do liczby całkowitej. Inne przeglądarki (FF) zaokrąglają do najbliższej liczby całkowitej pikseli. Wszystkie będą używać wartości dziesiętnej do obliczania wartości potomnych.
Możesz spróbować użyć translateZ, aby wymusić na elemencie tekst z akcentem graficznym, co może "pozwolić" na renderowanie subpikseli dla tekstu. Jeśli to zadziała, prawdopodobnie będzie działać tylko w Chrome.
#elm {
transform: translateZ(0);
}
Dzięki za wskazanie niespójności przeglądarki. Wypróbowałem na firefoxie i wyliczyłem, że jest to 14.66, więc nawet się nie rusza. Zastanawiam się, jaki jest najlepszy sposób na to samo renderowanie między przeglądarką przy zachowaniu stosunku wysokości linii. –
@pgn - niestety wszystkie używają różnych silników renderujących i interpretacji powiązanych specyfikacji. Jeśli sztuczka translateZ (0) nie działa w Chrome, to po prostu zagłębisz się w szalone hacki. Jeśli byłby przysłowiowy pistolet do mojej głowy, spróbowałbym napisać tekst z SVG lub w CANVAS. –
Można określić konkretną line-height w dowolnej jednostce, np. line-height: 2.2rem;, dzięki czemu można uniknąć problemu z zaokrąglaniem, jeśli obliczysz rozmiar rem, aby działał na parzystą liczbę we wszystkich przeglądarkach, np. jeśli ustawisz wartość domyślną:
html {
font-size: 62.5%; /* 10px = 1rem */
}
Następnie za każdym razem, gdy ustawisz wysokość linii na wartość, np. line-height: 2.2rem; to byłoby dokładnie 22px. Byłoby to takie samo we wszystkich przeglądarkach.
Czy mogę zapytać, jak w końcu to zrozumiałeś? – Birowsky