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

【问题标题】：Make form button/text field same height in all browsers?在所有浏览器中使表单按钮/文本字段的高度相同？
【发布时间】：2011-05-27 20:45:31
【问题描述】：

我有以下 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 px，但我无法看到它来自哪里，它只是计算出来的。应用的样式（显示给我的）是相同的。

【问题讨论】：

似乎我通过添加 line-height: 16px !important; 为 ff 和 chrome 修复了它到 .button .. 但是我不明白。那么我希望按钮高 1 px

标签： html css forms height

【解决方案1】：

改变：

*{
    line-height: normal !important;
}

或添加类似：

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

不要问为什么）

和。野生动物园需要特殊修复。但看起来不错

【讨论】：

对不起，我必须问。为什么？
+1 这样一个简单的解决方案，其他人有很多解决方法。做得很好。事实证明，button 元素从其父元素继承（在 Chrome 中计算）line-height，其中input 设置为normal。 Discussed on GitHub necolas/normalize.css.

【解决方案2】：

我在normalize.css 中找到了这个为我解决的问题：

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

【讨论】：

【解决方案3】：

通过给予尝试

.text{
 border:0px;   
}

【讨论】：

【解决方案4】：

过去，我通常使用 Firefox 浏览器使用以下其中一种方法。

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

CSS3 具有box-sizing 属性。将它的值设置为border-box，你告诉浏览器元素的边框宽度和内边距应该包含在元素的高度中，然后可以很容易地自行设置高度：

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

这也适用于 html select 元素。

【讨论】：