IE9 text rendering issue - tails on letters cut off

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?

---

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)

---

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

---

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;
}

---

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. */
}