在所有浏览器中将表单按钮/文本字段设置为相同的高度？ [英] Make form button/text field same height in all browsers?

问题描述

我有以下css和html（向下钻取到的基本要素。有附加样式的完整代码可以在这里找到：我有这个CSS粘贴在jsfiddle： http://jsfiddle.net/BwhvX/ ，但这足以重现问题）

I have the following css and html (drilled down to the essentials. The full code with additional styles can be found here: I have this css I pasted on jsfiddle: http://jsfiddle.net/BwhvX/ , this is however enough to reproduce the problem)

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如何呈现：

this is how firefox renders:

这是Chrome的呈现方式：

this is how chrome renders:

我想让两个表单元素在所有浏览器中具有相同的高度。看起来像我一些默认样式是应用，我手动需要重置像我在这个例子中的Firefox。
在chrome开发工具一个有高度16和一个高度17 px，但我不能看到它从哪里来，它刚刚计算。应用的样式（显示给我）是一样的。

i want the two form elements to have the same height in all browsers. looks to me like some default style is applied, that i manually need to reset like i did for firefox in this example. in chrome developer tools one has height 16 and one height 17 px but i am not able to see where it comes from, its just calculated. the applied styles (that are shown to me) are the same.

推荐答案

更改：

*{
    line-height: normal !important;
}

或添加以下内容：

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

不问为什么）

和。 safari需要特殊的修复。但看起来不错

and. safari need special fixes. but looks well

这篇关于在所有浏览器中将表单按钮/文本字段设置为相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！