IE6 Input fields grow as you type #46

rodolfocaldeira opened this Issue Sep 22, 2011 · 3 comments


2 participants

There seems to be an issue with the input fields in IE6, the fields grow as you type.

Take a look at the screenshot

I think the problem is with this line:

button, input { line-height: normal; *overflow: visible; }

I fixed this by targeting IE6, and rewriting the overflow property.

button, input { line-height: normal; *overflow: visible; _overflow: inherit; }

Thank you


necolas commented Sep 22, 2011

Hey, thanks a lot. This is a great spot. Also happens in IE7. I missed this in testing and a quick google didn't find any blog posts mentioning it.

This is what I'm thinking of going with...a change that retains the fix for IE7 but abandons the button-width fix in IE6 (since you cannot avoid also targeting text inputs).

 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet

input {
    line-height: normal; /* 1 */

 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Corrects inner spacing displayed oddly in IE7 without effecting normal text inputs
 *    Known issue: inner spacing remains in IE6

input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */

If there is a need to fix the excess button/submit/etc width in IE6, I think it will have to be handled with a class that can be authored during development.

@necolas necolas closed this Sep 22, 2011


necolas commented Sep 22, 2011

Thanks again for reporting this. Let me know if you encounter any issues with this fix or anything else in the project.

No worries Nicolas,

If if find any more issues I'll let you know.

Thank you for the fix.

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