
			<p>很早就遇到过这么个小问题，但由于其并未影响到实际作用和美观就没有正面解决它，现在，我们来试着解决它。</p>
<p>写一个Button，有两种方式：其一，直接button标签；其二，input type=&#8221;button&#8221;。</p>
<p>不管哪种方式，Button的宽度在IE6、7下总是不能完美，接下来我们演示一个普通的Button，你可以用IE6或者IE7浏览器看看其显示宽度，然后对比Chrome或者IE8等浏览器，你会发现Bug的所在。</p>
<p><strong>1、一个普通的Button:</strong></p>
<p>可以很直接的看到Button的两边有空隙，当然，这个空隙是无法用padding:0来解决的。</p>
<p>通常，不少同学会想到给该Button定义一个width:100px。</p>
<p><strong>2、width:150px的Button：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo-button01</span>{<span style="color: #000;">width</span>:<span style="color: #164;">150px</span>;}</pre>
<p>恭喜，你是对的。但是，我们必须这个Button自适应宽度呢？</p>
<p>好吧，加个width:auto试试。</p>
<p><strong>3、width:auto的Button：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo-button02</span>{<span style="color: #000;">width</span>:<span style="color: #164;">auto</span>;}</pre>
<p>哦也，还是不行！下面试试网上提供的一种方法。</p>
<p><strong>4、width:auto;overflow:visible;的Button：</strong></p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo-button03</span>{<span style="color: #000;">width</span>:<span style="color: #164;">auto</span>;<span style="color: #000;">overflow</span>:<span style="color: #164;">visible</span>;}</pre>
<p>Yes，可行！还有一个方法如下：</p>
<pre style="margin: 15px 0; font: 100 12px/18px monaco, andale mono, courier new; padding: 10px 12px; border: #ccc 1px solid; border-left-width: 4px; background-color: #fefefe; box-shadow: 0 0 4px #eee; word-break: break-all; word-wrap: break-word; color: #444;">.<span style="color: #170;">demo-button04</span>{<span style="color: #000;">width</span>:<span style="color: #164;">1</span>;<span style="color: #000;">overflow</span>:<span style="color: #164;">visible</span>;}</pre>
<p>但个人觉得width:1的写法很二，所以摒弃之。</p>
<p><strong>结语：</strong></p>
<p><strong></strong>如果你要问问什么IE6、7下会出现这样的问题，我说是微软很二。解决Button自适应宽度的最佳办法是<span style="color: #008000;">width:auto;overflow:visible;</span></p>
<p>参考资料：<a href="http://jehiah.cz/a/button-width-in-ie" target="_blank">http://jehiah.cz/a/button-width-in-ie</a></p>
<p>转载请注明：<a href="http://www.daqianduan.com">大前端</a> &raquo; <a href="http://www.daqianduan.com/button-width/">解决Button在IE6、7下的自适应宽度问题</a></p>		