Question

在this page上有一个包含发布和取消按钮的表单。前者是<input type="submit">，后者是<a>。出于某种原因，“发布”按钮比“取消”按钮略高，但我不明白为什么，因为它们都有相同的内容：

字体大小
顶部和底部边框尺寸
顶部和底部填充尺寸

我查看了Firebug，差异的原因似乎是因为<input>的{{1}}为19px，而height的高度为17px。我怎样才能使两者的高度相同？

更新

我对支持IE＆lt; = 7

并不感到困扰

Answer 1

您必须定义buttons的高度。

像这样写：

a.primaryAction, .primaryAction.matchLink {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    font-size: 13px;
    font-weight: normal;
    height: 30px;
    padding: 5px 11px;
    text-decoration: none;
}

Answer 2

您应该将display: inline-block应用于a，以匹配已有display: inline-block的按钮。

您还需要此功能删除extra spacing in Firefox：

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

Answer 3

这种问题可能是一个很难解决的问题。

只有块元素接受高度。您可以使用display:block或display:inline-block来实现此目标。

首先，display:inline-block;似乎是一个不错的，简单的方法 - 但在IE7或更早版本中不受支持。

因此，您既可以使用内联块，也可以使用旧浏览器，或者为ie7添加条件样式表，或者display:block可以给它们一个宽度（如果合适的话）。

Answer 4

以下CSS规则适用于您的情况：

.buttonHolder * { height:17px; }

使按钮和链接高度相同

更新

4 个答案: