为什么Firefox 4中的按钮长度比IE9和Chrome 11长，应该如何解决？

问题描述

| CSS：

button,button.btnBlue,button.btnRed,button.btnGreen,button.btnOrange,button.btnPink {
margin-left: 2px !important;
margin-right: 2px !important;
padding-top: 0px;
padding-right: 3px;
padding-bottom: 0px;
padding-left: 3px;
height:25px;
border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  cursor:pointer;
  white-space:nowrap;
  overflow:visible; /* fixes width in IE7 */
  outline:0 none /* removes focus outline in IE */
}

button::-moz-focus-inner,button::-moz-focus-inner.btnBlue,button::-moz-focus-inner.btnRed,button::-moz-focus-inner.btnGreen,button::-moz-focus-inner.btnOrange,button::-moz-focus-inner.btnPink {
border:none;
}
/* removes focus outline in FF */

button:hover,button:focus,button:hover.btnBlue,button:focus.btnBlue,button:hover.btnRed,button:focus.btnRed,button:hover.btnGreen,button:focus.btnGreen,button:hover.btnOrange,button:focus.btnOrange,button:hover.btnPink,button:focus.btnPink {
  box-shadow:0 0 3px rgba(0,0.4);
  -moz-box-shadow:0 0 3px rgba(0,0.4);
  -webkit-box-shadow:0 0 3px rgba(0,0.4);
}

button {
font:normal 13px arial,helvetica,sans-serif;
  color:#000;
  border:1px solid #ccc;
  background-color:#f6f6f6;
  background-image:linear-gradient(top,#fff,#efefef);
  background-image:-moz-linear-gradient(top,#efefef);
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fff),to(#efefef));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
}

button:hover,button:focus {
border-color:#999;
  background-color:#f0f1f3;
  background-image:linear-gradient(top,#ebebeb);
  background-image:-moz-linear-gradient(top,#ebebeb);
  background-image:-webkit-gradient(linear,to(#ebebeb));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
}

button:active {
 background-color:#ddd;
  background-image:linear-gradient(top,#ccc,#fff);
  background-image:-moz-linear-gradient(top,#fff);
  background-image:-webkit-gradient(linear,from(#ccc),to(#fff));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc,endColorStr=#ffffff);
}
/* End Defulat button */
/* Blue Button */
button.btnBlue {
font:normal 13px arial,sans-serif;
  color:#ffffff;
  border:1px solid #415999;
  background-color:#3d5699;
  background-image:linear-gradient(top,#4465ba,#043fdb);
  background-image:-moz-linear-gradient(top,#043fdb);
  background-image:-webkit-gradient(linear,from(#4465ba),to(#043fdb));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4465ba,endColorStr=#043fdb);
}

button:hover.btnBlue,button:focus.btnBlue{
/* removes focus outline in FF */
border-color:#415ca3;
   background-color:#44557f;
  background-image:linear-gradient(top,#4b63a0,#2b5cdb);
  background-image:-moz-linear-gradient(top,#2b5cdb);
  background-image:-webkit-gradient(linear,from(#4b63a0),to(#2b5cdb));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4b63a0,endColorStr=#2b5cdb);
}

button:active.btnBlue {
 background-color:#3d5699;
  background-image:linear-gradient(top,endColorStr=#043fdb);
}
/* End Blue Button */
/* red Button */
button.btnRed {
font:normal 13px arial,sans-serif;
  color:white;
  border:1px solid #995441;
  background-color:#99503d;
  background-image:linear-gradient(top,#ba5d44,#db3104);
  background-image:-moz-linear-gradient(top,#db3104);
  background-image:-webkit-gradient(linear,from(#ba5d44),to(#db3104));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba5d44,endColorStr=#db3104);
}

button:hover.btnRed,button:focus.btnRed{
/* removes focus outline in FF */
border-color:#a35641;
   background-color:#7f5144;
  background-image:linear-gradient(top,#a05d4b,#db512b);
  background-image:-moz-linear-gradient(top,#db512b);
  background-image:-webkit-gradient(linear,from(#a05d4b),to(#db512b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a05d4b,endColorStr=#db512b);
}

button:active.btnRed {
 background-color:#99503d;
  background-image:linear-gradient(top,endColorStr=#db3104);
}
/* End red Button */
/* Green Button */
button.btnGreen {
font:normal 13px arial,sans-serif;
  color:#000000;
  border:1px solid #599941;
  background-color:#56993d;
  background-image:linear-gradient(top,#65ba44,#3fdb04);
  background-image:-moz-linear-gradient(top,#3fdb04);
  background-image:-webkit-gradient(linear,from(#65ba44),to(#3fdb04));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#65ba44,endColorStr=#3fdb04);
}

button:hover.btnGreen,button:focus.btnGreen{
/* removes focus outline in FF */
border-color:#5ca341;
   background-color:#557f44;
  background-image:linear-gradient(top,#63a04b,#5cdb2b);
  background-image:-moz-linear-gradient(top,#5cdb2b);
  background-image:-webkit-gradient(linear,from(#63a04b),to(#5cdb2b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#63a04b,endColorStr=#5cdb2b);
}

button:active.btnGreen {
 background-color:#56993d;
  background-image:linear-gradient(top,endColorStr=#3fdb04);
}
/* End Green Button */
/* Orange Button */
button.btnOrange {
font:normal 13px arial,sans-serif;
  color:#ffffff;
  border:1px solid #996a41;
  background-color:#99683d;
  background-image:linear-gradient(top,#ba7b44,#db6804);
  background-image:-moz-linear-gradient(top,#db6804);
  background-image:-webkit-gradient(linear,from(#ba7b44),to(#db6804));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba7b44,endColorStr=#db6804);
}

button:hover.btnOrange,button:focus.btnOrange{
/* removes focus outline in FF */
border-color:#a36e41;
   background-color:#7f6044;
  background-image:linear-gradient(top,#a0734b,#db7d2b);
  background-image:-moz-linear-gradient(top,#db7d2b);
  background-image:-webkit-gradient(linear,from(#a0734b),to(#db7d2b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a0734b,endColorStr=#db7d2b);
}

button:active.btnOrange {
 background-color:#99683d;
  background-image:linear-gradient(top,endColorStr=#db6804);
}
/* End Orange Button */
/* pink button */
button.btnPink {
font:normal 13px arial,sans-serif;
  color:#000000;
  border:1px solid #994154;
  background-color:#993d50;
  background-image:linear-gradient(top,#ba445e,#db0432);
  background-image:-moz-linear-gradient(top,#db0432);
  background-image:-webkit-gradient(linear,from(#ba445e),to(#db0432));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba445e,endColorStr=#db0432);
}

button:hover.btnPink,button:focus.btnPink{
/* removes focus outline in FF */
border-color:#a34156;
   background-color:#7f4451;
  background-image:linear-gradient(top,#a04b5d,#db2b51);
  background-image:-moz-linear-gradient(top,#db2b51);
  background-image:-webkit-gradient(linear,from(#a04b5d),to(#db2b51));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a04b5d,endColorStr=#db2b51);
}

button:active.btnPink {
 background-color:#993d50;
  background-image:linear-gradient(top,endColorStr=#db0432);
}
/* End pink Button */

HTML：

<button type=\"submit\" class=\"btnRed\">Cancel</button><button type=\"submit\">Back</button><button type=\"submit\" class=\"btnBlue\">Continue</button>

我已经把这个弄糟了大约3个小时，但我似乎找不到什么错。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）