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

移除填充,将高度设置为相同的值,调整两个浏览器的垂直对齐,然后对所有浏览器进行框大小调整。

下面是一个工作示例的链接。 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;
}

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

附加 浮动:左; 在Chrome和Firefox中,这两个元素都解决了这个问题。 您还可以添加 左边距:2倍; 到 .按钮 恢复使用此解决方案时按钮之间丢失的间隙。

一个可能的罪魁祸首是过多的空格。不同的浏览器对HTML中的缩进和换行有不同的解释。您应该通过一个空白剥离函数输出所有的HTML。(作为奖励,它还可以节省带宽)

这就是我所做的,尽管它不能很好地使用JavaScript:

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

ob_start('ob_compress_html');