使按钮和链接的高度相同

Question

在这个页面上，有一个带有发布和取消按钮的表单。前者是一个<input type="submit">，后者是一个<a>。由于某种原因，发布按钮比取消按钮略高，虽然我不理解为什么，因为它们都具有相同的：

• 字体大小
• 上下边框大小
• 上下填充大小

我在Firebug中看了一下，导致差异的原因似乎是因为<input>被赋予了19px的height，而<a>的高度为17px。如何使两者的高度相同？

更新

我不在意支持IE <= 7

- Dónal

---

你应该发布你的代码或问题的Pastebin链接，这样未来的读者就可以跟进讨论中的代码。有28k声望值的人可能会意识到这一点。 - kontur

Answer 1

您需要将 a 应用 display: inline-block，以匹配已经应用了 display: inline-block 的按钮。

您还需要这样做来消除 Firefox 中的额外间距：extra spacing in Firefox:

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

- thirtydot

---

看起来他的网站根本不支持IE7。我在IE7中检查了一下，除了按钮高度不正确之外，还有更严重的问题。无论如何，display: inline-block; *display: inline; zoom: 1 可以让inline-block在IE7中正常工作。 - thirtydot

@cale_b，针对IE7有一个inline-block的hack。 - sandeep

Answer 2

您需要定义您的按钮的高度。

写成这样：

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;
}

- sandeep

---

按钮上不应该使用“height”属性。 - ViliusL

box-sizing: border-box; 这是帮助我解决这个问题的关键，谢谢！ - Hannah

Answer 3

这种问题可能会让人头疼难解。

只有块级元素才接受高度属性，你可以使用display:block或display:inline-block来实现。

起初，display:inline-block;似乎是一种不错的选择，但它不支持IE7或更早的版本。

所以，你可以使用inline-block并放弃旧浏览器，或者为ie7添加条件样式表，或者如果适用的话，给它们一个宽度并使用display:block。

- random_user_name

Answer 4

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

.buttonHolder * { height:17px; }

- Karl Barker