ExtJS IE6 Combox box displays the drop-box down 2 pixels

I have an absolute positioned combo box in my ExtJS screen. All is cool under FF, but IE6 (and 7) show the drop down box a couple of pixels down so it does not line up with the arrow button. I tried wrapping the combo in a positioned div container and took off the x,y from the combo - didn't help.

If I set the style to margin: '-2px' it fixes it for IE but screws it up for FF.

Is this a known problem?

The control looks like this:

Update: This solution below would fix the problem but I开发者_如何学Python chose to use the ExtJs framework's CSS to fix this. The exact CSS I added to fix this was:

.ext-ie .x-form-field-wrap{height:22px;}
.ext-ie .x-form-text{margin:-2px 0;height:18px;}

Some of this may be specific to my app, but the ext-ie stuff seems to plug into the ExtJS framework.

If you just need to make a concession for IE (especially 6 and 7) then you can use the underscore hack so that your margin change will only take effect for that browser. Basically all browsers except for IE will ignore any CSS rule with an underscore in front of it.

Example:

combo {
    _margin: 2px;
}

For more info check out Weekly CSS Trick: The IE underscore hack. I wouldn't recommend using this hack liberally, but for a quick fix or two it does the job. If you want to go further than this and create an IE-only stylesheet check out How To Create an IE-Only Stylesheet.