Блог

Главная - Вопросы по программированию - Почему длина кнопок в Firefox 4 больше, чем в IE9 и Chrome 11, как это следует исправить?

Почему длина кнопок в Firefox 4 больше, чем в IE9 и Chrome 11, как это следует исправить?

#css

#css

Вопрос:

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 часов и, похоже, не могу найти, что не так.

Ответ №1:

Потому что браузеры не отображают одинаково 🙂

Со всей серьезностью, однако, если вы не хотите потратить следующие 3 часа на попытки различных взломов, обновлений и разочарований, используйте изображение. Если у вас их много, спрайтируйте их.

Комментарии:

1. Я бы согласился с @alex. Тратьте свое время на гораздо более продуктивные вещи, чем на поиски волшебного рая, где все работает идеально все время во всем, что занимает бесчисленные часы и дает очень мало реальных результатов, если вообще дает какие-либо.

Ответ №2:

Просто предположение: вы задаете высоту кнопок, но не ширину.

Таким образом, ширина зависит от размера шрифта, который в Firefox больше, чем в большинстве других браузеров.

Ответ №3:

Попробуйте добавить «padding:0;» к «button::-moz-focus-inner»

Ответ №4:

Не устанавливайте явную ширину кнопок с помощью width, используйте отступы влево и вправо для управления желаемой шириной, и все будет работать нормально. (возможно, придется также использовать display:inline-block), немного сложно определить без желаемой разметки

Например, вместо .button1 {width: 200px;} используйте .button {padding-left: 50px; padding-right: 50px;}