css - 输入和按钮在 Safari 中不对齐

Question

我试图让一个文本输入和一个按钮在 Safari 7.0.4 中排列，但它根本不起作用。

http://jsfiddle.net/LFFTP/

form {
    height: 30px;
    background: #000;
    padding: 0;
    margin: 0;
}
input {
    border: 0px;
    width: 60px;
    height: 30px;
    background: #900;
    padding: 0;
    margin: 0;
}
button {
    border: 0px;
    height: 30px;
    background: #fff;
    padding: 0;
    margin: 0;
}

<form>
    <input type="text" value="Input" />
    <button>Button</button>
</form>

您会注意到在 Safari 中按钮低了 1 像素(如从表单背景中可见的一小块黑色所示)。我找不到原因或修复方法。

Answer 1

我不确定为什么，但它与垂直对齐有关。

添加:

input,
button {
  vertical-align: top;
}

看来您可以将它添加到按钮，但我想安全总比后悔好。

Fiddle