button按钮在 IE 中两边被拉伸的解决办法

大家在写按钮（input (type="button") 、button）的时候会发现在 IE 下：
随着字数的增多，两边的间距也会越来越大。
到底是什么原因呢？
IE 下按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了overflow:visible 属性后才有效）后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。

 

代码如下

input.button {
    padding: 0 .25em;
    width: auto;
    _width: 0;
    overflow:visible !ie;
}

  demo

评论

2 楼 ice-cream 2009-03-10  

yiminghe 写道

yc?? zz 的吧  ,在其他地方也看过差不多的 ,ie7下还是 有毛边的

ie7下的毛边暂时还没有解决的办法。在网上看到过这个问题，试了下，把原文章稍做了修改。

1 楼 yiminghe 2009-03-10  

yc?? zz 的吧  ,在其他地方也看过差不多的 ,ie7下还是 有毛边的