输入和按钮在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中注意到按钮低1px（由表格背景中可见的黑色小块表示）。我找不到理由或解决这个问题。

Answer 1

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

添加：

input,
button {
  vertical-align: top;
}

您似乎可以将其添加到button，但我觉得比抱歉更安全。

<强> Fiddle