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

Question

我有以下的CSS和HTML（仅列出了必要部分。完整代码及其他样式可以在此找到：我在jsfiddle上粘贴了这个CSS：http://jsfiddle.net/BwhvX/，但这已足以重现问题）

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

- The Surrican

---

似乎我通过在 .button 中添加 line-height: 16px !important; 已经解决了 Firefox 和 Chrome 的问题，但是我不理解为什么。然后我期望按钮会高出 1 像素。 - The Surrican

Answer 1

更改：

*{
    line-height: normal !important;
}

或者添加类似以下内容：

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

不要问为什么

而且，Safari需要特殊的修复，但看起来很棒。

- lazycommit

---

抱歉，我必须问一下。为什么？ - guioconnor

+1 这是一个如此简单的解决方案，而其他人则需要巨大的变通方法。做得好。原来 button 元素从其父元素继承（或在 Chrome 中计算）line-height，而 input 则设置为 normal。在 GitHub necolas/normalize.css 上讨论。 - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Answer 2

我在normalize.css中找到了解决方法：

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

- Jethro Larson

Answer 3

尝试通过给予

.text{
 border:0px;   
}

- XMen

Answer 4

通常在使用火狐浏览器时，以下方法之一曾经为我解决过问题。

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

- Mikeys4u

Answer 5

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

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

这同样适用于 HTML select 元素。

- Vasiliy

Answer 6

如果您指定高度而不是行高，它们将正确呈现。高度在跨浏览器方面表现良好；行高则不然。

- BarthesSimpson

Answer 7

我在使用火狐浏览器时遇到了同样的问题，将行高设置为normal并没有帮助。但是，在输入框和按钮元素上设置相同的内边距值，解决了我的问题。

- tobart