CSS - odstępy między liniami

Mam problem z odstępami między liniami w kilku przypadkach.

Tworze projekt z wykorzystaniem biblioteki GeSHi http://qbnz.com/highlighter/ ale chcę zrobić własne numerowanie lini, ponieważ to użyte w geshi polega na użyciu listy numerowenej OL, a więc po zaznaczeniu kodu kopiujemy także dodatkowe znaki #.

Problemem są niestety linie w których czcionka zostaje pogrubiona. Te linie są wtedy minimalnie większe i rozciągają kod.

http://propl.eu/testy/text.html - jak widzicie bez formatowania działa dobrze ;] idealnie numeracja zbiega się z linią w kodzie.

http://propl.eu/testy/text_php.html - jak doszło formatowanie to już nie jest tak kolorowo. Chrome dobrze to odczytuje, Firefox już nie. Opera też sobie radzi, no i jak zwykle IE8 wymięka.

http://propl.eu/testy/text_php%20_bold.html - jeśli pogrubimy cały tekst to problem znika ;]

Jak to naprawić?

PS. http://wklej.org/hash/15dab41b740/ interpretuje dobrze. On korzysta z line-height: 105% ale u mnie to jakoś nie działa :/

2 lata, 1 miesiąc temu | edytowane przez: lqc 3965112

  • Próbujesz zastosować podejście, jakiego jeszcze nie widziałem i obawiam się, że ze względu na ilość spanów, może Ci się nie udać. Najczęściej spotykanym rozwiązaniem jest chowanie samych numerów linii.

    Na Twoim miejscu spróbowałbym dwóch eksperymentów:

    1. Objąć każdy z numerków spanem ze stylem podobnym do pogrubionych słów kluczowych (najlepiej przez klasy CSS'ów) i zobaczyć jaki będzie rezultat.
    2. Pomierzyć wysokość spanów z pogrubieniem i bez pogrubienia za pomocą JavaScript'u na końcu strony - kiedyś robiłem podobne eksperymenty i dało radę. Potem spróbować ustalić paddingi dla numeracji.

    To jedyne, co mi przychodzi teraz do głowy - może ktoś rzuci lepsze światło na problem.

Zaloguj się, aby dodać swoją odpowiedź