From 6d085d7e520572ca4a8c73fe09a44362792e30d0 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Thu, 22 Sep 2011 18:31:16 +0100 Subject: [PATCH] Prevent text inputs growing as you type in IE6/7. Fix #46 Applying *overflow:visible to button/input causes text inputs to grow to fit their content, even if an explicit, fixed width is applied. It was originally included to remove excess inner spacing on buttons and submit/reset/button-type inputs in IE6/7. Fixing this bug in IE6 requires dropping the fix entirely because there is no way to avoid it being applied to text inputs. If there is a need to fix this excess spacing bug in IE6, then it should be done using a class that is applied to the necessary elements. For IE7, the excess spacing fix can be moved into the ruleset that targets button and submit/reset/button-type inputs. This prevents text inputs from growing. --- demo.html | 2 +- normalize.css | 19 +++++-------------- 2 files changed, 6 insertions(+), 15 deletions(-) diff --git a/demo.html b/demo.html index 55bf280..feb8e78 100644 --- a/demo.html +++ b/demo.html @@ -235,7 +235,7 @@
Inputs as descendents of labels (form legend) -

+

diff --git a/normalize.css b/normalize.css index 487511e..7e7bab9 100644 --- a/normalize.css +++ b/normalize.css @@ -1,4 +1,4 @@ -/*! normalize.css 2011-09-14T10:27 UTC - http://github.com/necolas/normalize.css */ +/*! normalize.css 2011-09-22T17:42 UTC - http://github.com/necolas/normalize.css */ /* ============================================================================= HTML5 display definitions @@ -340,29 +340,19 @@ textarea { } /* - * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet - * 2. Corrects inner spacing displayed oddly in IE6/7 + * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet */ button, input { line-height: normal; /* 1 */ - *overflow: visible; /* 2 */ -} - -/* - * Corrects overlap and whitespace issue for buttons and inputs in IE6/7 - * Known issue: reintroduces inner spacing - */ - -table button, -table input { - *overflow: auto; } /* * 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 */ button, @@ -371,6 +361,7 @@ input[type="reset"], input[type="submit"] { cursor: pointer; /* 1 */ -webkit-appearance: button; /* 2 */ + *overflow: visible; /* 3 */ } /*