按钮大小与样式不同

Question

我想设计按钮和链接的样式以使其看起来相同，总的来说我已经做到了。但我不能让按钮和链接看起来完全一样：

• 我将按钮的高度设置为 25px，但它没有 25px 的高度，Firebug 和 Chrome 显示为 21px；
• 宽度相同：比我设置的小 4 个像素；
• 链接周围有一些奇怪的边距，而按钮没有，但我将边距设置为 0。

听起来微不足道，但是当按钮和链接放在一起时，很容易将其视为设计中的错误（我在布局损坏的地方添加了红线）。登录按钮是真正的提交表单的按钮，注册是一个链接到注册页面，看起来像一个按钮。

这里的登录按钮是 106x21 像素，注册链接是 110x25 像素。

以下是我的风格：

a.button,
button {
    display: inline-block;
    width: 110px;
    height: 25px;
    padding: 0;
    margin: 0;
    color: white;

    background: #7dbedb; /* Old browsers */
    background: -moz-linear-gradient(top,  #7dbedb 0%, #95c3ea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dbedb), color-stop(100%,#95c3ea)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #7dbedb 0%,#95c3ea 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #7dbedb 0%,#95c3ea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dbedb', endColorstr='#95c3ea',GradientType=0 ); /* IE6-9 */

    text-shadow: 1px 1px 1px #757575;
    filter: dropshadow(color=#000000, offx=1, offy=1);

    border: 2px solid #79cee6;
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
}

用法：

<form ...>
    ...

    <button>Login</button>
    <a href="..." class="button">Register</a>
</form>

简而言之：我不能让 <button> 和 <a> 看起来完全一样。

附注。我知道我可以通过 onclick 事件在任何地方使用按钮。以及将所有提交按钮作为带有 onclick 事件的链接。但我不想这样做，所以不需要 js 提交表单或点击链接。

Answer 1

按钮（和其他输入）不遵循块模型。

为了调整按钮的大小，您可以：

• 在按钮中使用填充
• 设置box-sizing: content-box;为强制按钮使用标准模型

对于第二种解决方案，您可能必须使用整套等效声明：

a.button,
button {
    ...
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

编辑 ：

调整这个的一个问题是不同的浏览器有不同的按钮。

所以这适用于 Chrome/ubuntu：http : //jsfiddle.net/HAB6W/

这适用于 FF/ubuntu：http : //jsfiddle.net/Z5H5u/

我不确定尝试获得按钮的精确外观是否是个好主意。我知道当我想要一个像素精确的样式时，我只使用标准元素（通常是跨度）作为按钮。

新编辑：

这可能很有用：在 Firefox 中输入类型=提交文本垂直对齐