i have this simple html and css http://jsfiddle.net/JVfVv/1/
Problem is the text is being cropped under safari/chrome/firefox on mac. Removing overflow: hidden corrects the problem, however this line is necessary for other reasons. Removing line-height: 1; appears to fix the problem, however i get this from my reset stylesheet, and I don't understad why having it causes a crop.
Can someone explain why this is happening, and how to fix it please? thanks
To answer the question of why this happens, I think the key is this particular phrase from the Fonts section of the CSS 2.1 spec (emphasis mine):
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.
The line-height: 1 declaration sets the height of the paragraph to the same height as the font-size (since the paragraph only has one line). The fact that some characters are cut off implies that their glyphs bleed outside their em squares (I don't know how to definitively prove that this is true; I'm just speculating based on the evidence).
As for a solution, the most straightforward solution would be to use a larger line-height setting, such as 1.1 or 1.2.