Extra space and white outline within button elements

[lojjic]

This problem is exemplified in tests/buttons.html

The problem is that for and elements, IE does some funky rendering of the element's contents. If the button is given a non-zero-width transparent border and a transparent background (as PIE gives it) then it will add some mysterious space in between the border area and the background area. This area is always drawn as solid white. The end result is that when PIE is applied to a button, that button will have an extra square solid white outline just within the PIE-rendered border, and the button will be larger than expected due to the extra space.

As one of the primary targets for CSS3 styles on many websites is styling buttons, this is a pretty big issue.

A possible solution would be to adopt the approach taken by e.g. dd_roundies which sets the target element to border-width:0 and increases the element's padding by the same amount as the original border widths. I've tried to avoid this approach because it has side-effects for things such as descendant positioning. It could also be tricky avoiding infinite loops due to triggering onresize events. It would definitely be selectively applied to only elements like button/input which need it.

[lojjic]

This has been fixed on the head. I inserted some special-case logic for buttons where, when hiding the border, it increases the button padding by the border width and then sets the border width to zero. This eliminates the extra opaque border-like thing.