爲什麼Firefox 4中按鈕的長度比IE9和Chrome 11長，應該如何解決？

的CSS：爲什麼Firefox 4中按鈕的長度比IE9和Chrome 11長，應該如何解決？

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小時，我似乎無法找到什麼是錯。

來源

2011-04-19 Keverw

Because browsers don't render the same :)

在所有的嚴重性不過，如果你不想花未來3小時，試圖各種黑客，刷新和挫折，使用圖像。如果你有很多，精靈'他們。

來源

2011-04-19 02:44:42 alex

我同意@alex。花費你的時間做更有效率的事情，而不是尋找所有需要數小時才能完美工作的神奇天堂，併產生非常少的（如果有的話）真實結果。 – 2011-04-19 02:47:41

只是猜測：你設置按鈕的高度，但不是寬度。

因此，寬度取決於字體大小，在Firefox中它大於其他大多數瀏覽器。

來源

2011-04-19 02:46:15 lyle

字體大小很有意義。 – Keverw 2011-04-19 02:48:23

嘗試添加「padding：0;」 to「button :: - moz-focus-inner」

來源

2011-04-19 02:56:49 bogatyrjov

不要在使用寬度的按鈕上設置顯式寬度，使用左側填充和右側填充來控制所需的寬度，並且可以正常工作。（可能必須使用display：inline-block），在沒有所需標記的情況下難以分辨

例如，而不是 .button1 {width：200px;} use .button {padding-left：50px; padding-right：50px;}

來源

2014-02-17 10:03:51 Saty

爲什麼Firefox 4中按鈕的長度比IE9和Chrome 11長，應該如何解決？

回答

相關問題