Completely solves the adaptive width problem of the Button in IE6 and 7.

There are two ways to write a Button: one is the direct button label, and the other is the input type = "button ".

Either way, the width of the Button is always not perfect in IE6 or 7. Next we will demonstrate a normal Button. You can use IE6 or IE7 to check its display width, then compare Chrome, IE8, and other browsers, and you will find the Bug.

1. A common Button:

We can directly see that there is a gap between the two sides of the Button. Of course, this gap cannot be solved by padding: 0.

Generally, many developers think of defining a width: 100px for the Button.

2. width: 150px Button:

.demo-button01{width:150px;}

Congratulations, you are right. But what about the adaptive width of the Button?

Okay, add width: auto.

3. width: auto Button:

.demo-button02{width:auto;}

4. width: auto; overflow: visible; Button:

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

Yes, feasible! Another method is as follows:

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

However, I personally think that width: 1 is a second method, so I discard it.

Conclusion:

If you want to ask Internet Explorer 6 or Internet Explorer 7, I would say Microsoft is second-class. The best way to solve the adaptive width of the Button is

width:auto;overflow:visible;

Articles you may be interested in

• Javascript solves the issue of highly adaptive between left and right
• Note the following when querying strings with single quotes and inserting strings with single quotes in Mysql:
• How to solve conflicts between concurrent read/write files in php
• Automatically adjust the image width during webpage Loading
• Iframe adaptive Height Solution
• Text area textarea box adaptive height based on input content
• Common knowledge about Mysql INDEX OPTIMIZATION
• Install and use Sphinx in windows [Chinese full-text search is supported]