如何控制文本输入的高度并在不同的浏览器中提交输入按钮？

Question

我有一个很小但很难(对我来说)的问题需要解决.

我有一个文本输入和一个提交按钮.我需要它们是完全相同的高度,并且在Chrome和Firefox中也是如此,理想情况下也是Internet Explorer.

HTML

<input type="text" name="email" /><input type="submit" value="»" />

CSS

input[type=text] {
    width: 218px;
}

input[type=submit] {
    background: #000;
    color: #fff;
}

input[type=submit], input[type=text] {
    padding: 9px;
    font-size: 18px;
    line-height: 18px;
    float: left;
    border: 0;
    display: block;
    margin: 0;
}

我在这里的jsfiddle上设置了这个基本代码.

你应该注意到如果你用chrome加载它,按钮的高度低于文本输入,而在firefox中,它的大小更大.

我错过了什么？

Answer 1

删除/添加line-height: 18px;两者.

Answer 2

提交按钮的垂直填充无效.这似乎是一个webkit错误.您可以通过指定explit高度并通过输入字段的顶部和底部填充来增加提交按钮的高度来解决问题.

input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}