IE9 text rendering issue - tails on letters cut off

css fonts internet-explorer-9 typography
thynctank picture thynctank · May 17, 2011 · Viewed 8.7k times · Source

I'm running into an issue where - in IE9 standards mode - IE9 renders text in such a way that the tails on descending letters - "q, p, y" etc - disappear. Have tried playing with padding and other common CSS settings in helps of fixing this but am having no luck so far.

Who's got an idea what this might be?

Answer

Elad picture Elad · Oct 14, 2012

EDIT: I found this on a blog. The link isn't live anymore. Leaving it here just in case it pops up again.

Its as though the text is a node inside the input and the line-height has been set on that inner element, with the surrounding element clipping the overflowing text.

The solution is simple, set the line-height to be “1” (no-units)

Related questions

Internet Explorer automatically switches to compatibility mode (IE9 and IE10)

On certain page on my site, Internet Explorer automatically switches to compatibility mode and tries to render the page in compatibility view (IE7 mode). Also the URL gets added to the compatibility view list.

Read More
How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
CSS Font Border?

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will …

Read More