有的人有固定宽度的方法，但觉得不是太好。
首先要先明白两点：
一、ie在按钮的value值每增加4个字节（汉字为2个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
二、ie的按钮（xp风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。
相信理解了以上现象后解决起来也不会难了，所幸刚好写过解决这个的方法。
复制内容到剪贴板
代码:
<!-- IE Quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
*{font-size:12px;}
.button,.button input{
display:-moz-inline-box;
display:inline-block;
background-image:url(//bbs.blueidea.com/attachments/2006/12/25/add_ZKfMl3JpD868.png);
}
.button{
margin:auto 1%;
padding-right:3px;
background-position:100% 0;
}
.button input{
padding:1px 3px 3px 15px;
_padding:3px 0 0 12px;
border:0;
text-align:center;
}
label.button.hover,.button:hover{
background-position:100% 100%;
}
label.button.hover input,.button:hover input{
background-position:0 100%;
color:#f00;
}
@media all and(min-width:0px){/* opera 7 styles */
.button input{padding:4px 6px 4px 18px;}
}
</style>
<title></title>
</head>
<body>
<label class="button">
<input type="button" value="添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加" />
</label>
<script type="text/javascript">
var nav=navigator.appVersion;
if (nav.indexOf('MSIE')!=-1){
var input=document.getElementsByTagName("input");
for(var i=0; i<input.length; i++){
var inputs=input[i];
if(inputs.type=="button"){
var inputL=inputs.value.replace(/[^\x00-\xff]/g,'**').length;
if(inputL>4){
var iCFS=inputs.currentStyle.fontSize.substring(0,2);
inputs.style.width=inputs.clientWidth-((inputL-4)*iCFS/4)+"px";
}
}
}
}
</script>
</body>
</html>
