IE9 text rendering issue - tails on letters cut off

Question

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 1

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)

Answer 2

Are you using a custom font (@font-face) as i found that sometimes when using that on certain sizes it would cut off the tails on text, regardless of line-height

Answer 3

I just had this problem using font: inherit on input. Declared the actual fonts I wanted (Verdana primarily) and the tails are visible again.

Also tested line-height on input—but that caused the problem again.

This is what I ended up with:

body, button, input, select, textarea {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 100%;
}
body {
    line-height: 1.5;
}

Answer 4

This setting the line-height:inherit on input boxes did the trick for me.

input[type="text"], input[type="email"], input[type="password"], {
  line-height: inherit; /* for i.e. */
}