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

Question

我有以下 css 和 html （深入到要点。可以在此处找到带有其他样式的完整代码：我将这个 css 粘贴到 jsfiddle 上： 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 像素，但我无法看到它来自哪里，它只是计算出来的。应用的样式（向我展示的）是相同的。

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;
}

Answer 3

尝试通过给予

.text{
 border:0px;   
}

Answer 4

通常，以下其中一项在过去使用 Firefox 浏览器对我有用。

 vertical-align: bottom;
  vertical-align: top;

Answer 5

如果您指定高度而不是行高，它们将正确渲染。 height 跨浏览器表现良好；行高没有。

Answer 6

Firefox 也有同样的问题，设置 line-height:normal 没有帮助。在输入和按钮元素上设置相同的填充值帮助了我。

Answer 7

CSS3 具有 box-sizing 属性。将其值设置为 border-box，告诉浏览器该元素的边框宽度和填充应包含在元素的高度中，然后可以轻松设置高度本身：

input {
    box-sizing: border-box;
    height: 15px;
}

这适用于 html 也选择 元素。