The adaptive width Problem of button in CSS under IE6 and 7

Write a button, there are two ways: first, direct button tag; second, input type= "button".

Either way, the button's width is not perfect at IE6, 7, and then we'll show you a regular button that you can use IE6 or IE7 to see its display width, and then compare browsers such as Chrome or IE8 to see where the bug is.

1, an ordinary button:

Can be very direct to see the button on both sides of the gap, of course, this gap can not be solved with padding:0.

Often, many students would think of defining a width:100px for the button.

2, width:150px button:

. Demo-button01 {width:150px;}

Congratulations, you're right. But do we have to adapt this button to the width?

Well, try adding a width:auto.

3, Width:auto button:

. demo-button02 {width:auto;}

Oh, or not! Now try one of the methods available online.

4, width:auto;overflow:visible button:

. demo-button03 {width:auto; overflow:visible;}

Yes, it works! Another approach is as follows:

. demo-button04 {width:1; overflow:visible;}

But personally feel that Width:1 's writing is two, so abandon it.

Conclusion:

If you want to ask what IE6, 7 will appear such a problem, I said that Microsoft is two. The best way to solve the button's adaptive width is width:auto;overflow:visible;