在所有浏览器中使表单按钮/文本字段的高度相同？

Question

我有以下css和html(深入到基本要点.可以在这里找到带有其他样式的完整代码:我在jsfiddle上粘贴了这个css:http://jsfiddle.net/BwhvX/,但这足够了重现问题)

CSS:

* {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    line-height: 15px;
    border: none;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
}

#search .text, #search .button {
   border: 1px solid red;
}

HTML:

<form method="post" id="search" action="">
    <p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>

这是firefox渲染的方式:

这是chrome渲染的方式:

我希望两个表单元素在所有浏览器中具有相同的高度.看起来像我应用了一些默认样式,我手动需要像我在这个例子中为firefox做的那样重置.在Chrome开发者工具中,一个高16和高17 px,但我无法看到它来自哪里,它刚刚计算出来.应用的样式(显示给我)是相同的.

Answer 1

更改:

*{
    line-height: normal !important;
}

或添加如下内容:

input[type="submit"], input[type="text"] {
    line-height:normal !important;
}

不要问为什么)

和.safari需要特殊修复.但看起来很好

Answer 2

我在normalize.css中发现了这个解决了它的问题:

// Removes inner padding and border in Firefox 4+.
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}