大家在写按钮（input、button）的时候会发现在 IE 下：
- 随着字数的增多，两边的间距也会越来越大。
- 在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。
到底是什么原因呢？
蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案：
1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。
对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题 ，我们还是可以修复的。
IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。
最终的修复代码如下（Demo）：
input.button {
padding: 0 .25em;
width: auto;
_width: 0;
overflow:visible !ie;
}
共有27 条评论
沙发
板凳~
貌似实战价值不大。
input{
padding:0 0.25em;
width:0;/*for ie6 only*/
overflow:visible;
}
input[type="button"]{
width:auto;/**for other browsers*/
}
更喜欢这样的代码
话说,我的项目,input都被设计师用图片了,
还没碰到类似问题,
飘过~！
很不错，学习了～思想很好。
@7655cjc 我也喜欢
@vitrum 对于input使用了背景图片且宽度自适应的按钮还是要用到这个方法的
确实没注意 默认按钮用得少
overflow:visible !ie;
汗,这!ie是啥子概念…求教
http://jehiah.cz/archive/button-width-in-ie-revised
@linxz 这种方法无效的，我已经测试过。你提供的链接地址在IE7中解决BUG是因为页面是在quirks mode下。
@大猫 !ie仅是一个hack用来区分是否是IE，同*的hack，可以不必理会或深究
以前遇到过，没去解决。都是把宽度写死的。
这个办法不错。
大体上还是看不懂
不错。
以前发现过这个问题，但没有怎么研究过。
佩服！
评论按钮被拉伸Bug…
不知道写个什么标题比较好不知道大家有没有发现.在IE下网页里的按钮两边回被拉伸.字数越多拉伸的越厉害.而且与此同时按钮的边缘还出现了锯齿.
原因是1,IE在按钮的value值每增加4个字节(汉…
受用
写死不就得了。
貌似overflow:visible;会对ie6下产生一个最小高度
过来学习的.
怿飞你说得这种情况我遇到过，我差不多都是用这种把BORDER: #ece9d8 2px outset，WIDTH: auto;
overflow:visible !ie;中!ie什么意思嗫？还有那个demo page是不是该更新了，ie6正常，ie7最下边的
#c input.button还是不对。[...] 学习自怿飞‘s blog，没有经过亲自试验，也不知道能不能通过css校验，做个笔记先。 [...]
[...] http://www.planabc.net/2008/11/12/the_stretched_buttons_bug/ [...]
[...] http://www.planabc.net/2008/11/12/the_stretched_buttons_bug/ [...]