Кнопка не отображается одинаково во всех броузерах

Question

Ниже приведен код CSS, который я создал, чтобы нарисовать кнопку. Когда я просматриваю это в Chrome, кнопка выглядит круговой, как должно, но в Firefox и IE она квадратная. Почему это так?

<!-- language: lang-css --> 

    .button { 
     width:90px; 
     float:right; 
     background:#FEDA71; 
     background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
     background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49)); 
     background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
     background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
     background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
     background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
     padding:8px 18px; 
     color:#623F1D; 
     font-family:'Helvetica Neue',sans-serif; 
     font-size:16px; 
     -moz-border-radius:48px; 
     -webkit-border-radius:48px; 
     border:1px solid #623F1D 
    } 

ниже код сделал Firefox начать работать, но IE все еще не работает

Code after change and still doensnt work 

background:#FEDA71; 
    background:-moz-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FEDA71),color-stop(100%,#FEBB49)); 
    background:-webkit-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
    background:-o-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
    background:-ms-linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
    background:linear-gradient(top,#FEDA71 0%,#FEBB49 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEDA71',endColorstr='#FEBB49',GradientType=0); 
    padding:8px 18px; 
    color:#623F1D; 
    font-family:'Helvetica Neue',sans-serif; 
    font-size:16px; 
    border-radius:48px; 
    -moz-border-radius:48px; 
    -webkit-border-radius:48px; 
    border:1px solid #623F1D 

Answer 1

Вы не используете без префикса версию border-radius собственности, только -moz-border-radius и -webkit-border-radius. (Оба двигателя уже давно поддерживает border-radius свойства без префикса поставщика, кстати - Chrome since 5.0 and Firefox since 4.0 - так, если это не по причине, не пробуйте использовать те.)

Answer 2

Попробуйте добавить следующий код:

border-radius:48px;  //W3C 

Answer 3

попробуйте добавить

-moz-border-radius:48px; 
-webkit-border-radius:48px; 
border-radius:48px; 

для более старой версии IE вы можете дать PIE попробовать http://css3pie.com/

Answer 4

-moz-border-radius был удален из Gecko 13.0 в качестве псевдонима для border-radius, который был выпущен как Firefox 13 в 2012-06-05, поэтому любая последующая версия Firefox не поддерживает префикс -moz для border-radius, поэтому Firefox не применяет этот стиль.

-webkit-border-radius по-прежнему поддерживается как псевдоним, поэтому стиль применяется в Chrome.

Как указывали другие, добавление незафиксированного border-radius исправит недостающий стиль для Firefox.