The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Gecko vs. WebKit line-height behavior

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #38489

    I’m having a bit of an issue with a small side-project of mine. I have a number of boxes with counter-generated numbers assigned to each box’s ::before. The page uses Helvetica (with Arial as a fallback) as its font. Now the fun begins: When I align the counter with the box in Firefox it looks horrible in Safari and vice versa. A bit of playing with the ::before’s background revealed that apparently Gecko and WebKit have different opinions on how line-heights work.

    Here’s a fiddle that illustrates the problem.

    In Firefox 12 the ::before’s background fills the parent element exactly and the content has little whitespace above it. In Safari 5.1.7 there is additional whitespace above the content and the line is taller than the parent element.

    I am aware that the behavior is even worse with Arial; Firefox has additional whitespace and an offset ::before while Safari merely has the whitespace. Given that I’ll probably switch to a webfont for the sake of consistency anyway – but I can’t be certain that I can find a good-looking one that won’t cause the same issue.

    My Google-fu is too weak to find anything useful on the topic. Is there some way to normalize line-height behavior between engines or will I just have to look for a font that happens to work the same everywhere? Or am I making a really obvious, stupid mistake I’m not noticing?

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.