如何将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;
}

这段代码可以减少冗长，但你明白了。

Answer 2

在两个元素中附加 float：left; 可修复Chrome和Firefox中的此问题。 您还可以将 margin-left：2px; 添加到 .button ，以便在使用此解决方案时恢复按钮之间的缺失。

Answer 3

一个可能的罪魁祸首是多余的空白。不同的浏览器以不同的方式解释HTML中的缩进和换行符。您应该通过空白剥离功能输出所有HTML。 （作为奖励，它还可以节省带宽）

这就是我的工作，虽然它与JavaScript不相称：

function ob_compress_html($str)
    {
    return preg_replace(array('{>\s{2,}<}', '{^\s+}', '{\s+$}D'), array('><'), $str);
    }

ob_start('ob_compress_html');