Question

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

我遇到过这个问题

按钮和输入框不会水平排列。无论我将其更改为哪一个总是与另一个浏览器上的另一个不同。

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

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

Answer 1

我找到了解决方案。

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

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

在Firefox中，按钮获得额外的2px填充。在所有其他浏览器中，他们没有。所以不可能只使用填充来匹配它们。

您必须将顶部和底部填充设置为0px，并使用height: 25px; vertical-align: middle;来弥补填充的丢失。

Answer 2

我遇到了同样的问题，并使用John的上述答案提出了解决方案，而无需使用高度和垂直对齐属性。

在我的重置样式中，我基本上做到了所有输入都具有正常的行高，因此Chrome将呈现与Firefox和IE相同的呈现方式。这个和John的代码之间的重要补充是针对一般输入选择器：

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

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

2 个答案: