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