按钮大小与样式不同答案

【问题标题】：Button size is different that's in styles按钮大小与样式不同
【发布时间】：2012-08-19 19:20:44
【问题描述】：

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

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

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

此处登录按钮为 106x21 px，注册链接为 110x25 px。

这是我的风格：

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>

简而言之：我不能让

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

【问题讨论】：

你可以试试加line-height
@mkk 这不适用于按钮
@dystroy 在你做出这样的陈述之前检查一些东西，check jsfiddle，在 chrome 上测试
@mkk 我检查过，可能很糟糕。您是否使用整个 OP 的 css 进行了测试？还有in Firefox ?
刚刚看了一遍。毕竟，它至少部分是重复的：stackoverflow.com/questions/1679952/…

标签： css button

【解决方案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

【讨论】：

你真的尝试过这样做吗？它不能解决任何问题。
几乎完美！但是 1）在 FF 链接中比按钮小 1-2 像素：i.imgur.com/1bTtN.png，2）我需要删除高度属性，否则看起来更糟：i.imgur.com/OnNel.png
@Abody97 是的，我试过了。您可以通过为 button 和 a.button 赋予不同的高度来进行调整，以考虑边框。我仍然有一个垂直定位问题（和一个会议问题，这意味着我现在无法测试更多......）。

【解决方案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;**
}

【讨论】：