Question

我想按钮和链接的样式看起来一样，一般来说我已经这样做了。但我不能让按钮和链接看起来完全一样：

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

听起来微不足道，但是当按钮和链接放在一起时，它很容易被标注为设计中的错误（我添加了布局被破坏的红线）。登录按钮是提交表单的真实按钮，而Register是注册页面的链接，看起来像一个按钮。 misaligned

此处登录按钮为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>

用两个词说：我不能制作＆lt; button＆gt;和＆lt; a＆gt;看起来完全一样。

PS。我知道我可以通过onclick事件随处使用按钮。以及使用onclick事件将所有提交按钮作为链接。但我不想这样做，所以不需要提交表格或点击链接。

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/

我不确定尝试精确查看按钮是个好主意。我知道当我想要像素精确的样式时，我只使用标准元素（通常是跨度）。

新编辑：

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

Answer 2

example

a,
input {
    font-family:arial;
    display:inline-block;
    border:1px solid black;
    background-color:blue;
    color:white;
    float:left;

    text-decoration:none;
    font-size:12px;

    **padding:2px 5px;
    height:20px;
    vertical-align:top;

    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    -ms-box-sizing:content-box;
    -o-box-sizing:content-box;
    box-sizing:content-box;**
}

按钮大小与样式不同

2 个答案: