如何将HTML按钮与链接对齐？

Question

我正在尝试将输入按钮与链接(类"按钮")对齐,但在Safari和Chrome中,顶部有1个像素差异,我无法弄清楚原因.

<input class="button" name="commit" type="submit" value="Enrol" />
<a href="#" class="button" id="cancel">Cancel</a>

input.button {
  height: 38px;
  font-size: 18px;
  color: white;
  font-weight: normal;
  font-style: normal;
  background: #4D28B2;
  border: 1px solid gray;
  padding: 5px;
}
a.button {
  display: inline-block;
  padding: 5px;
  height: 24px;
  font-size: 18px;
  color: white;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
  text-align: left;
  background-color: #4D28B2;
  border: 1px solid gray;
}

有什么问题,我该如何解决？

Answer 1

删除填充,将高度设置为相同的值,调整两者的垂直对齐,然后为所有浏览器执行大小调整.

这是一个工作示例的链接.http://jsfiddle.net/cjXcp/5/

和代码:

input.button {
    height: 38px;
    font-size: 18px;
    color: white;
    font-weight: normal;
    font-style: normal;
    background: #4D28B2;
    border: 1px solid gray;
    vertical-align: middle;
    padding: 0px 5px;
}
a.button {
    display: inline-block;
    height: 38px;
    font-size: 18px;
    color: white;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    background-color: #4D28B2;
    border: 1px solid gray;
    vertical-align: middle;
    line-height: 38px;
    padding: 0px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

这段代码可以减少冗长,但你明白了.