css - 按钮大小与样式不同

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>

两个词:我不能让 和 看起来完全一样。

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

Answer 1

按钮(和其他输入)不遵循 block 模型。

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

• 在按钮中使用内边距
• 设置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/

我不确定尝试获得按钮的精确外观是个好主意。我知道当我想要像素精确的样式时，我只对按钮使用标准元素(通常是 span)。

新编辑:

这可能有用:input type=submit text vertical alignment in Firefox