When you write buttons (input, button), you will find that under IE:
As the number of words increases, the spacing between the two sides will become larger and larger.
In WIN's XP style, when the number of words is large, there will be severe jagging on both sides.
What exactly is the reason?
The original WEB standardization column of Blue Ideal gives an answer:
1. Whenever IE adds the value of the button by 4 bytes (2 Chinese characters), a margin width of a total of one byte will be generated on both sides of the button.
2. The default style of IE button (XP style) is a fixed-size rounded rectangle picture as the background, so once the button becomes wider and taller, the edges of this fixed-size rounded rectangle picture will naturally appear to be frosted.
We cannot solve the second problem for the time being, unless the WIN system fixes the bug itself, but we can still fix the first problem.
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 property has actually been used in the last article "Application of background-clip and background-origin". However, after reading "The stretched buttons problem in IE" today, I found that there was a small bug - if you place the button in a table cell, although the button is displayed correctly, the original reserved width has not changed and still occupy space. You need to set the width of the button to 0 in IE6 (IE7 also has this bug, but no good way to solve it for the time being).
The final fix code is as follows (Demo):
input.button { padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie;}