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

Answer 1

尝试添加：

vertical-align: top;

按钮样式。

Answer 2

解释：<a>默认为inline标记，因此当您为其显示block或inline-display时，您需要给他们一个对齐定位.... 按照 sbeliv01 为您的按钮类添加vertical-align: top;，为其提供位置元素！：）

输入向下移动1px

2 个答案: