IE9 - the descender (tail) part of some lowercase letters such as g, p, q or y are clipped #5307

Closed
kytruong opened this Issue Nov 20, 2012 · 2 comments

Projects

None yet

2 participants

@kytruong

Issue description:
In IE9, the descender (tail) part of some lowercase letters such as g, p, q or y are clipped.

Steps to reproduce:

  1. Please open below links with IE9, input g, p, q or y into field Text Input (Note that these letters are not clipped in Search Input!)
    http://jquerymobile.com/demos/1.2.0/docs/forms/textinputs/
    http://code.jquery.com/mobile/latest/demos/docs/forms/textinputs/
  2. You might need to resize one of the vertical windows to make it smaller and see the descender is clipped

Platforms/browsers:

  • Window phone 7.5 emulator
  • Or desktop Windows 7 Enterprise / IE9 version 9.0.8112.16421

jQuery Mobile and jQuery core version used:

  • jQuery Mobile 1.2.0
  • the lastest jQuery Mobile

Thank you!

@jaspermdegroot
Member

@kytruong

Thanks for the complete issue report.

I just committed a fix for this. Downside of the fix is that the inputs became far too heigh on IE7/8. To resolve this, and some other issues, I made some bigger changes to the textinput widget.

Bigger changes like that is not something we can land in a maintenance release like the upcoming 1.2.1. So we decided to wait with the fix for the issue that you reported until 1.3 as well.

For now you can add this to your custom CSS to fix the issue:

.input.ui-input-text { min-height: 1.4em; line-height: 1.4em; }

And if you use a class to target old IE (e.g. <!--[if lt IE 9]> <html class="old-ie"> <![endif]-->) you can negate the min-height to fix the height of inputs on IE7/8:

.old-ie .input.ui-input-text { min-height: auto; }
@kytruong
kytruong commented Dec 5, 2012

Thanks uGoMobi. I'll try it out and inform you the result.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment