The button is stretched on both sides in IE BUG_HTML/Xhtml_Webpage Production

When you write buttons (input, button), you will find that under IE:
As the number of words increases, the space between the two sides will become larger and larger.
In WIN's XP style, when the number of words is large, severe jagged edges will appear on both sides.
What is the reason?
Bamboo zbm2001z of Blue Ideal's original WEB standardization column gave an answer:
1. When IE increases the value of the button by 4 bytes (2 Chinese characters), it will appear on both sides of the button. Produces a total padding width of one byte.
2. The default style of IE's button (XP style) is a fixed-size rounded rectangle image as the background, so once the button becomes wider and taller, the edges of this fixed-size rounded rectangular image will naturally appear " Hair pulling” phenomenon.
For the second problem, we have no way to solve it for the time being, unless the WIN system fixes the BUG itself, but for the first problem, we can still fix it.
Set the visible value of the overflow attribute for the button element under IE (Note: the padding value is only valid after the overflow:visible attribute is set). This attribute is actually mentioned in the "background-clip and background-origin" article written last time. It has been used in the article "Then Application". However, after reading "The stretched buttons problem in IE" today, I discovered that there is still a small bug - if the button is placed in a table cell, although the button is displayed correctly, the originally reserved width size has not changed. , still occupying space, you need to set the width of the button to 0 in IE6 (IE7 also has this BUG, ​​but there is no good way to solve it yet).
The final repair code is as follows (Demo):
input.button { padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie;}