为什么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,0,0.4);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.4);
  -webkit-box-shadow:0 0 3px rgba(0,0,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, #fff, #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, #fff, #ebebeb);
  background-image:-moz-linear-gradient(top, #fff, #ebebeb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), 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, #ccc, #fff);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc, endColorStr=#ffffff);
}
/* End Defulat button */
/* Blue Button */
button.btnBlue {
font:normal 13px arial,helvetica,sans-serif;
  color:#ffffff;
  border:1px solid #415999;
  background-color:#3d5699;
  background-image:linear-gradient(top, #4465ba, #043fdb);
  background-image:-moz-linear-gradient(top, #4465ba, #043fdb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,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, #4b63a0, #2b5cdb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#4b63a0), to(#2b5cdb));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4b63a0,endColorStr=#2b5cdb);
}

button:active.btnBlue {
 background-color:#3d5699;
  background-image:linear-gradient(top, #4465ba, #043fdb);
  background-image:-moz-linear-gradient(top, #4465ba, #043fdb);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#4465ba), to(#043fdb));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4465ba,endColorStr=#043fdb);
}
/* End Blue Button */
/* red Button */
button.btnRed {
font:normal 13px arial,helvetica,sans-serif;
  color:white;
  border:1px solid #995441;
  background-color:#99503d;
  background-image:linear-gradient(top, #ba5d44, #db3104);
  background-image:-moz-linear-gradient(top, #ba5d44, #db3104);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,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, #a05d4b, #db512b);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#a05d4b), to(#db512b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a05d4b,endColorStr=#db512b);
}

button:active.btnRed {
 background-color:#99503d;
  background-image:linear-gradient(top, #ba5d44, #db3104);
  background-image:-moz-linear-gradient(top, #ba5d44, #db3104);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba5d44), to(#db3104));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba5d44,endColorStr=#db3104);
}
/* End red Button */
/* Green Button */
button.btnGreen {
font:normal 13px arial,helvetica,sans-serif;
  color:#000000;
  border:1px solid #599941;
  background-color:#56993d;
  background-image:linear-gradient(top, #65ba44, #3fdb04);
  background-image:-moz-linear-gradient(top, #65ba44, #3fdb04);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,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, #63a04b, #5cdb2b);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#63a04b), to(#5cdb2b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#63a04b,endColorStr=#5cdb2b);
}

button:active.btnGreen {
 background-color:#56993d;
  background-image:linear-gradient(top, #65ba44, #3fdb04);
  background-image:-moz-linear-gradient(top, #65ba44, #3fdb04);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#65ba44), to(#3fdb04));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#65ba44,endColorStr=#3fdb04);
}
/* End Green Button */
/* Orange Button */
button.btnOrange {
font:normal 13px arial,helvetica,sans-serif;
  color:#ffffff;
  border:1px solid #996a41;
  background-color:#99683d;
  background-image:linear-gradient(top, #ba7b44, #db6804);
  background-image:-moz-linear-gradient(top, #ba7b44, #db6804);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,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, #a0734b, #db7d2b);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#a0734b), to(#db7d2b));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a0734b,endColorStr=#db7d2b);
}

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

button:active.btnPink {
 background-color:#993d50;
  background-image:linear-gradient(top, #ba445e, #db0432);
  background-image:-moz-linear-gradient(top, #ba445e, #db0432);
  background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ba445e), to(#db0432));
 filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ba445e,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个小时,但我似乎找不到什么错。
已邀请:
因为浏览器无法呈现相同的内容:) 严肃地说,如果您不想在接下来的3个小时中尝试各种破解,刷新和挫败感,请使用图像。如果您有很多,请精灵\'em。
只是猜测:您设置按钮的高度,而不是宽度。 因此宽度取决于字体大小,在Firefox中,字体大小大于大多数其他浏览器。
尝试将\“ padding:0; \”添加到\“ button ::-moz-focus-inner \”
不要使用width在按钮上设置显式宽度,而是使用左侧的填充和右侧的填充来控制所需的宽度,即可正常工作。 (可能也必须使用display:inline-block),如果没有所需的标记,很难分辨 例如,而不是 .button1 {width:200px;}使用.button {padding-left:50px; padding-right:50像素;}

要回复问题请先登录注册