输入框和按钮不匹配 IE 和 Firefox答案

【问题标题】：input box and button aren't matching up IE and Firefox输入框和按钮不匹配 IE 和 Firefox
【发布时间】：2014-11-18 09:52:31
【问题描述】：

我正在制作的页面顶部有一个搜索框，我一直在尝试使页面跨浏览器友好，并具有灵活的页面分辨率。

我遇到过这个问题

http://imgur.com/gS3q02W

按钮和输入框没有水平对齐。不管我把它改成什么，在另一个浏览器上总是与另一个不同。

有人知道跨浏览器友好的解决方案吗？

html

<div id='search'>
                <form>
                    <input class='search' type="text" placeholder="what would you like to find?" required>
                    <input class='button' type="button" value="search">
                </form>
            </div>

css

#search {
    padding-left:200px;
    margin-right:5px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    }

.search {
    margin-top:5px;
    padding:4px 15px;
    width:250px;
    background:#FFF;
    border:none;
    color:#232d38;
    }

.button {
    position:relative;
    padding:4px 15px;
    left:-4px;
    border:none;
    background-color:#FFF;
    color:#232d38;
    }

.button:hover  {
    border:none;
    background-color:#FFF;
    color:#000;
    }

【问题讨论】：

Firefox 不能很好地处理输入（任何类型）的行高。
从头开始！显然，他们决定在最新版本中实现这一点。只需将 font-size:12px 添加到每个输入。
没用。从好的方面来说，较小的字体确实看起来更好。
@JohnDoe 与 firefox 的 18px 相比，标签在 IE 中的高度似乎为 15.33= 16px。这就是问题所在。您可以使用

标签： html css button input cross-browser

【解决方案1】：

我找到了解决办法。

问题在于浏览器的默认样式。 Mozilla 以其无穷的智慧选择将这一行放在他们的 CSS 中：

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

在 Firefox 中，按钮获得额外的 2px 内边距。在所有其他浏览器中，它们没有。因此，仅使用填充来使它们匹配是不可能的。

你必须将top和bottom padding设置为0px，并使用height: 25px; vertical-align: middle;来弥补padding的损失。

【讨论】：

【解决方案2】：

我遇到了同样的问题，并使用上面 John 的答案提出了一个解决方案，而无需使用 height 和 vertical-align 属性。

在我的重置样式中，我基本上是这样设置的，以便所有输入都具有正常的行高，以便 Chrome 呈现与 Firefox 和 IE 相同的内容。这与上面 John 的代码之间的重要补充是针对通用输入选择器：

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

【讨论】：