大家在写按钮(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