输入框向下移动了1像素。

Question

我正在尝试使应用于<a>或<input>的按钮在Chrome中显示正确。然而，输入框会向下移动1px，但我真的不知道为什么。

我尝试覆盖来自浏览器的每个样式，但没有用。

我知道我可以使用相对位置或其他方法将其向上移动，但这不是我要寻找的解决方案，我想知道那1px来自哪里。

HTML:

<a class="button" href="#">link button</a>
<input class="button" value="input button" type="button" />

CSS（层叠样式表）：

.button {
    display: inline-block;
    text-align: center;
    margin: 0 0 24px 0;
    border: 1px solid #000;
    padding: .3em .6em;
    background: #ccc;
    color: #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    line-height: 1;
}

演示： http://codepen.io/wfmarc/pen/uHhvJ

- user2030592

---

如果你的问题需要展示你的代码（几乎所有编程问题都需要），请在你的问题中包含你的代码，不要只是发布一个演示并期望我们去那里查看你正在做什么。这一次，我已经为你做了；请在以后自己完成这个步骤。 - David Thomas

好的，谢谢，下次会这样做。 - user2030592

Answer 1

尝试添加：

vertical-align: top;

改变您的按钮样式。

- sbeliv01

---

快速回复+1......不过，根据user2030592的要求，缺少解释，这也是必需的!! :) - NoobEditor

是的，谢谢，这就是解决方案！但是我不明白这是从哪里来的。我已经添加了"display: inline-block"，但在检查器中找不到垂直对齐的内容，但输入框需要它，而链接则不需要。 - user2030592

谢谢！这刚刚让我免去了一个头疼的问题 - 我有一个 div、输入框和选择框在同一行，它们的高度都不同... 完全没有意识到可以通过这种方式解决。 - ElDoRado1239

Answer 2

解释：默认情况下，<a> 是一个 inline 标记，所以当你给它们一个显示为 block 或 inline-display 的属性时，你需要同时给它们一个对齐属性来进行定位... 根据 sbeliv01 的建议，在您的按钮类中添加 vertical-align: top; 属性即可确定其位置！ :)

- NoobEditor