Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 641
thynctank Avatar asked May 16 '11 22:05

thynctank


4 Answers

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)

like image 159
Elad Avatar answered Oct 05 '22 22:10

Elad


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

like image 20
Martin Avatar answered Oct 05 '22 21:10

Martin


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;
}
like image 42
Ben Boyle Avatar answered Oct 05 '22 20:10

Ben Boyle


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. */
}
like image 35
nelsonenzo Avatar answered Oct 05 '22 21:10

nelsonenzo