不能讓我的按鈕看起來在不同的瀏覽器相同

Question

我不是很擅長網頁設計，我創建了一個使用CSS的按鈕，但我不知道如何讓它在不同的瀏覽器中看起來相同。

這是我使用的按鈕：

<input type="submit" class="randombutton" value="click here!"/> 

這是我創建的CSS：

.randombutton { 
    border-top: 1px solid #d1d425; 
    background: #e6eb4c; 
    background: -webkit-gradient(linear, left top, left bottom, from(#92b019), to(#e6eb4c)); 
    background: -webkit-linear-gradient(top, #92b019, #e6eb4c); 
    background: -moz-linear-gradient(top, #92b019, #e6eb4c); 
    background: -ms-linear-gradient(top, #92b019, #e6eb4c); 
    background: -o-linear-gradient(top, #92b019, #e6eb4c); 
    padding: 19px 38px; 
    border-radius: 40px; 
    color: white; 
    font-size: 23px; 
    font-family: Georgia, Serif; 
    text-decoration: none; 
    vertical-align: middle; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    } 
.randombutton:hover { 
    border-top-color: #c0df36; 
    background: #c0df36; 
    color: white; 
    } 
.randombutton:active { 
    border-top-color: #9eb829; 
    background: #9eb829; 
    } 

這是導致我在3個不同的瀏覽器獲得：

另外我想提一提的是，我不能將按鈕居中屏幕中間。

該按鈕應該看起來像用於Chrome瀏覽器的圖像。我會感謝一些幫助。

Answer 1

因爲互聯網瀏覽器< 9不知道圓角你不能在IE中做到這一點，因爲漸變更有可能你會在每個瀏覽器中得到不同的結果。

最好的做法是使圖像並添加自定義的設計，然後插入提交作爲圖像

<input type="image" name="submit" src="http://www.example.org/images/my_submit_button.png" value="click here!" /> 

Answer 2

圓角和漸變按鈕是很難做到跨瀏覽器，當你還必須照顧IE。

至於Firefox，只需添加-moz-border-radius: 40px;，使其看起來像在Chrome上。

對IE的漸變支持是通過DX圖像轉換完成的。

Cross Browser CSS Gradient舉例說明如何實現跨瀏覽器的漸變。

編輯：但是，Mihai是正確的，最好通過圖像而不是按鈕來實現結果，因爲它看起來不是引擎/瀏覽器相關的。

Answer 3

我會建議使用像http://border-radius.com/一個邊界半徑發電機來設置圓角，它會給你你錯過了多餘的值（注意順序是顯著）：

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

由於讓它在不同瀏覽器上看起來相同，按鈕是一個痛苦的世界，所以你有兩個主要選項：

1. 讓它在IE7和IE8中優雅地退化。也就是說，不要擔心角落不圓，你仍然會有一個綠色的按鈕。在良好的瀏覽器中，它會看起來更好一些;但是人們並不會真正關心，因爲普通用戶不會進行並行比較。
2. 使用圖像。如果你需要（由客戶，老闆等）在瀏覽器上完成px完美的事情，我只會提出這個建議。

就我個人而言，我儘量避免重新設置窗體元素，因爲它昂貴（時間成本因爲很難做到）而且不可靠。讓他們獨立和用戶只是不注意到他們，這是很好的 - 他們是在網絡上把事情做完:)