Q: IE7 shrinking inputs issue I have some inputs which I am validation on keyup and it works perfectly well except in IE7 where it shrinks the input with each keystroke.
I have debugged the code to find out that it is the jQUery .addClass/.removeClass which is causing the effect.
It's just a plain old input, nothing special.
Any ideas?
$('input#myId').bind('keyup blur',function(){
        var _this = $(this);          
        if(_this.val().match(/^[0-9()\-\+\ ]+$/i)== null){
            _this.addClass('errorColor');               
        }else{
            _this.removeClass('errorColor');               
        }
});

EDIT:
I finally found the answer! It turns out that it was the boxsizing.htc script. This script dynamically converts the padding, margin AND border to be included within the elements height and width. Each time I typed in the input it tried to apply the class which triggered the onupdate event and refresh the elements size. In my CSS I was slightly lazy and had added the important declaration to the errorClass rule, purely to make sure it had the highest posible specificity. It was that importance that reveals a slight bug in the boxsizing code as it then counts the border width incrementally (or more simply it doesn't remove it from the previous calculation).
I'll try to get an example up asap.

A: probably jQuery has nothing to do with the issue in IE7. It is more likely the issue is due to CSS associated with errorColor class.

A: My best guesses without more data are:
a) The class is failing getting removed and keeps accumulating on the element.
b) This is some IE7 100% width weirdness, try 99% or auto and see if it helps.

A: It was boxsizing.htc script. Do not use the !important declaration with this script as it increments the values when calculating a refresh... hence the shrinking inputs
