Witam.

Mam problem który doprowadza mnie do szału:

Dostałem od grafika layout, który używa specjalnej czcionki. To żaden problem, jest @font-face, robiłem to 100x i zawsze działało.
Tyle, że napisy muszą być dość dokładnie wyrównane z innymi elementami - szczególnie w pionie (mają znajdować się na środku przeznaczonej dla nich belki).

Robiłem to pod Linuxem. Ustawiłem na oko, podglądając na Google Chrome. Super, działa.

Odpalam pod Operą. Jest git. Odpalam pod FireFoxem - masakra - raz - czcionka wygląda ohydnie (rozwalony hinting), dwa - jest 2 pixle niżej. Kolejna niespodzianka - odpalam ten layout pod Windowsem 7 - i pod każdą przeglądarką mam inną pozycję czcionki w pionie - rozrzut jakieś 4px. Nie - nie mogę tego tak zostawić, bo layout wygląda przez to jak kupa w lesie, a takiej lipy klientom nie oddaję.

Pytanie - skąd te potworne różnice w wyświetlaniu czcionek?
Czy da się coś zrobić, żeby zmusić przeglądarki, żeby wyświetlały czcionki chociaż w tym samym miejscu?

Pozycję ustawiam w typie absolute, względem lewego górnego rogu boxa w którym jest napis.

Wygląda to mniej więcej tak:



OK, czy ktoś miał taki problem i go rozwiązał? Mam taki plan, żeby stworzyć tabelkę przesunięć w pionie dla wszystkich przelgądarek pod Windowsem i Linuxem, następnie napisać funkcję która poprzesuwa teksty zgodnie z tą tabelką. Obawiam się jednak, że to taki brzydki hack jest, zadziała tylko dla tych przeglądarek, w których to przetestuję - w innych nadal będzie się rozjeżdżać. Nie mówiąc już, że masa roboty będzie ze zrobieniem samej tabelki. I jeszcze jedno - jak już to jakoś wyrównam dla jednej czcionki - nie wiem czy dla innych czcionek przesunięcia nie będą inne. Nawet nie wiem, czy są one bezwzględne (w pixlach), czy względne, a jeśli względne, to względem czego - rozmiaru czcionki w pixlach? Rozmiaru linii? Jakiegoś innego niewidzialnego wymiaru? Może jest jakaś magiczna właściwość css do tego? Vertical-align nie działa

Jak ktoś ma lepszy pomysł niż hack w JS (albo zna gotowy, dobry hack w JS), będę wdzięczny za pomoc.

PS: Problem nie dotyczy IE, bo dla IE i tak mam osobny arkusz i czcionkę w innym pliku. Raz ustawię i gra, problem jest z różnicą w położeniu pionowym pomiędzy Chrome, FireFox i Operą pod Linuxem i Windows 7. Różnice występują pomiędzy różnymi przeglądarkami, a także między tą samą przeglądarką w różnych systemach. Tak - wiem, że można tekst na obrazki podmienić - tylko tych nagłówków mam dużo i klient chce mieć możliwość ich zmiany - dlatego zależy mi jednak na tekście.

Bez przesady, każda przeglądarka to widzi inaczej, zależnie od domyślnych ustawień.

Ażeby css'a czytało tylko IE dajesz przed parametrem "_", czyli np.