Recently, I encountered an issue that has me a bit perplexed:
I have a span element with line-height set to 18px and font-size at 16px. Everything works perfectly when the text inside is regular; the height of the span remains at 18 pixels.
The problem arises when the text within the span is styled as either italics or bold. Strangely, the span element's height increases by one pixel, resulting in a 19-pixel tall span.
This quirk seems to be specific to Firefox. Other browsers such as IE, Safari, Opera, and Chrome do not exhibit this behavior. In those browsers, the span maintains its correct height of 18 pixels regardless of any styling changes.
Has anyone else come across this issue before?
Below is the snippet of code causing the problem:
span
{
font-size: 18px;
line-height: 18px;
}
span.italicSpan
{
font-style: italic;
}
You can see an example here:
Feel free to test the link in other browsers. You'll observe that the span elements maintain their correct 18-pixel height, in accordance with the line-height property being set to 18px.