2

我试图在我的页面上获得一个按钮（输入）和一个看起来相同的链接，但我在 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

4

2 回答 2

3

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

input::-moz-focus-inner /*Remove button padding in FF*/
{ 
    border: 0;
    padding: 0;
}
于 2013-08-01T14:04:32.577 回答
0

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

Display:block;
float:left;
于 2014-05-20T13:55:07.377 回答