按鈕在所有的比賽中不呈現相同

下面是我爲繪製按鈕而創建的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

來源

2013-02-28 user2108195

加入此項：border-radius：48px;閱讀更多關於CSS3'border-radius' [here。]（http://www.css3.info/preview/rounded-border/） – chriz 2013-02-28 15:42:57

您沒有使用border-radius屬性前綴的版本，只是-moz-border-radius和-webkit-border-radius。（這兩款發動機長期支持border-radius屬性，而不使用供應商名稱，順便說一句 - Chrome since 5.0 and Firefox since 4.0 - 所以，除非這是有原因的，不要打擾使用這些。）

來源

2013-02-28 15:41:36 Ryan

我已經並且仍然不能工作 – user2108195 2013-02-28 16:15:02

@ user2108195：在Firefox和IE中都是如此？每個版本有哪些版本？ IE是否處於兼容模式？ – Ryan 2013-02-28 16:17:40

它在Firefox上工作正常，但仍然不在IE和版本是9 – user2108195 2013-02-28 16:24:56

-1

嘗試添加以下代碼：

border-radius:48px;  //W3C

來源

2013-02-28 15:42:53 Jules

'-ms-border-radius'從未存在。 – Ryan 2013-02-28 15:43:08

但願它永遠不會存在。 – 2013-02-28 15:43:32

'-o-border-radius'也從來沒有存在過。 – Ryan 2013-02-28 15:48:56

嘗試增加

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

對於老版本的IE，你可能想給PIE一試http://css3pie.com/

來源

2013-02-28 15:44:02 Dine

-moz-border-radius從Gecko 13.0中刪除，作爲border-radius的別名，在2012-06-05發佈爲Firefox 13，因此任何後期版本的Firefox都不支持的-moz前綴，這就是Firefox未應用樣式的原因。

-webkit-border-radius仍支持作爲別名，這就是爲什麼該樣式正在Chrome中應用。

正如其他人指出的，添加前綴不正確的border-radius將更正Firefox的缺失樣式。

來源

2013-02-28 15:51:15 andyb

按鈕在所有的比賽中不呈現相同

回答

相關問題