原作者:Blank
在制作按钮的时候大家一般都很头疼，经常会出现这样那样问题，搞得很烦恼，那对于IE默认情况下的input按钮我们经常会碰见那些问题呢？下面列举了一些出现几率比较高的问题：
一、IE默认按钮的value值，每增加4个字节（汉字为2个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
二、XP风格的IE默认按钮样式是一个固定尺寸的圆角矩形图片作背景，一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘会出现“拉毛”现象。
三、当你触发按钮的时候，会出现1px的黑色的外边框，在input的bordor属性的外面。
蓝色论坛标准版版主zbm2001z 针对上面的一和二问题，提出了一个解决方案：
CSS要点提示：
1、display:-moz-inline-box;为Firefox的私有属性。
2、background-position:x y;第一个值用于横坐标，第二个值用于纵坐标。
3、下划线（_padding:3px 0 0 12px;），可参看Blank翻译的文章《翻译:The Underscore Hack》
4、opera进行特殊控制可以用：
@media all and (min-width: 0px) {
#选择器 {
CSS代码
}
}
此方法里的属性仅针对opera有效,其它浏览器不识别,所以有时候当opera浏览器和别的浏览器不兼容的时候我们就可以用这种方面来进行调整。
一、IE默认按钮的value值，每增加4个字节（汉字为2个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
二、XP风格的IE默认按钮样式是一个固定尺寸的圆角矩形图片作背景，一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘会出现“拉毛”现象。
三、当你触发按钮的时候，会出现1px的黑色的外边框，在input的bordor属性的外面。
蓝色论坛标准版版主zbm2001z 针对上面的一和二问题，提出了一个解决方案：
<!— IE Quirks mode —>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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(http://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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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(http://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>
CSS要点提示：
1、display:-moz-inline-box;为Firefox的私有属性。
2、background-position:x y;第一个值用于横坐标，第二个值用于纵坐标。
3、下划线（_padding:3px 0 0 12px;），可参看Blank翻译的文章《翻译:The Underscore Hack》
4、opera进行特殊控制可以用：
@media all and (min-width: 0px) {
#选择器 {
CSS代码
}
}
此方法里的属性仅针对opera有效,其它浏览器不识别,所以有时候当opera浏览器和别的浏览器不兼容的时候我们就可以用这种方面来进行调整。