输入提交和“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

只需在你的类中添加两个属性：

Display:block;
float:left;

Answer 2

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

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