我的CSS樣式在Firefox中與Chrome中不一樣？

我的按鈕是Chrome正在出現like this。我的CSS樣式在Firefox中與Chrome中不一樣？

這就是我想要的。

然而，在Firefox中，它似乎like this。

.mainButton_grey { 
    border: 1px solid BFBFBF; 
    background: -webkit-linear-gradient(top,#DBDBDB,#D1D1D1); 
    padding-top:7px; 
    text-align:center; 
    cursor:pointer; 
    width:200px; 
    height:22px; 
    border-radius:3 3; 
    background-color:#0972BD; 
    font-size:11px; 
    font-weight:bold; 
    font-family:Arial; 
    color:#404040; 
}

Jsfiddle這裏。

來源

2012-12-01 Seth

三兩件事：

獲得從這個網站的梯度CSS：http://www.colorzilla.com/gradient-editor/
更新您的邊界半徑指定單位：border-radius: 3px 3px;
添加#到您的邊框顏色聲明：border: 1px solid #BFBFBF;

來源

2012-12-01 01:48:10

只是一個建議的話梯度 - 如果你想盡可能多的瀏覽器兼容性越好，添加以下（只是改變了值）。

background: -moz-linear-gradient(black, white); /* FF 3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */ 
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */ 
background: -o-linear-gradient(black, white); /* Opera 11.10 */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */ 
background: linear-gradient(black, white); /* the standard fallback for old browsers */

語法解釋一下：http://www.impressivewebs.com/css3-linear-gradient-syntax/

而且還有一個真棒梯度發生器在這裏：http://www.colorzilla.com/gradient-editor/

來源

2012-12-01 01:50:35 Michelle

的原因是因爲你還沒有定義的線性漸變：

-moz-linear-gradient(top, #DBDBDB, #D1D1D1);

語法可能有點不同;但是每個瀏覽器都有不同的方式來解釋漸變。

這裏是與每個瀏覽器的梯度的一個示例：

background: rgb(245,246,246); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */ 
background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0); /* IE6-9 */

希望幫助。

來源

2012-12-01 01:52:16 Greg

我的CSS樣式在Firefox中與Chrome中不一樣？

回答

相關問題