3

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

  • 我将按钮的高度设置为 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> 看起来完全一样。

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

4

2 回答 2

6

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

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

  • 在按钮中使用填充
  • 设置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 中输入类型=提交文本垂直对齐

于 2012-08-24T08:42:05.353 回答
0

例子

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;**
}
于 2014-07-30T22:40:31.693 回答