輸入提交和「a」標籤樣式看起來完全相同 - Firefox問題

Question

我試圖讓一個按鈕（輸入）和一個鏈接在我的頁面上看起來完全相同，但我在Firefox中遇到了一些對齊問題。這是HTML：

<p> 
    <input type="submit" value="Create New User" /> 
    <a class="linkButton" href="/Admin">Cancel and Return to User Index</a> 
</p> 

我使用下面的CSS：

.linkButton, .linkButton:link, .linkButton:visited, input[type="submit"], input[type="button"] { 
    background-color: #4AACC5; 
    border: 1px solid #4A77C4; 
    color: #FFFFFF; 
    cursor: pointer; 
    height: 27px; 
    margin: 2px; 
    padding: 3px 6px; 
    text-align: center; 
    text-decoration: none; 
    width: auto; 
    font: inherit; 
} 

通過以上的設置一切工作在Chrome確定，但在Firefox我有兩個要素未對齊：

您可以檢查此撥弄既FF和Chrome：http://jsfiddle.net/hqJDZ/5/

現在，我想在兩種情況下都不會涉及使用a的解決方案，例如onclick="javascript:submit();"。視圖是腳手架和工作很好，所以我寧願純粹的HTML/CSS解決方案。

你可能注意到我沒有提到的IE瀏覽器...我只是不想去那裏暫且：P

Answer 1

我相信這可能是您的解決方案：https://stackoverflow.com/a/1986666/107244

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

Answer 2

只需在你的課堂中添加兩個屬性：

Display:block; 
float:left;