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

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

Answer 3

尝试通过提供

.text{
 border:0px;   
}

Answer 4

通常下面的其中一个使用firefox浏览器为我工作。

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

Answer 5

如果指定高度而不是行高，则它们将正确呈现。高度表现良好的跨浏览器;行高不会。

Answer 6

与firefox有同样的问题，设置line-height：normal没有帮助。在输入和按钮元素两者上设置identitcal填充值帮助了我。

Answer 7

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

#if __ANDROID__
            await DisplayAlert("Message 1", "Hello Android!", "OK");
#else
            await DisplayAlert("Message 2", "Hello WinPhone!", "OK", null);
#endif

这适用于html 选择元素。