html - 搜索文本字段和按钮高度/位置 (CSS)

Question

我的搜索框有问题。我试图使文本字段和按钮具有相同的高度，但我无法在所有浏览器中得到正确的结果。这是代码:http://codepen.io/anon/pen/ygCFz 。此方法在 Firefox 中工作正常，但在 Chrome 中不行。

那么让文本字段和按钮具有相同高度和位置的最佳方法是什么？

谢谢!

//编辑:因为有人要求提供代码以供进一步引用，这里是: HTML

<form id="search" action="" method="get">
        <input type="text" name="search" class="sfield" value="search and go"/>
        <input type="submit" value="Search" class="sbutton"/>
</form>

CSS

input.sfield{
  background-color:#fff;    
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1em;
    height:26px;
}

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px;
}

Answer 1

在输入元素上使用填充而不是高度。 Firefox 的行高应与字体大小完全相同。因此，如果您希望字体大小为 16 像素，请将行高设置为 16 像素，并在顶部和底部添加填充。对于您的提交按钮，请使用绝对定位以确保其位于顶部:0 和底部:0。只需在输入上添加与提交按钮宽度相当的 padding-left 即可，一切就完成了!

#search {
    position:relative;
    display:inline-block;
}

input.sfield{
    background-color:#fff;  
    border-color:#cecece;
    border-style:solid;
    border-width:1px 0 1px 1px;
    font-size:0.9em;
    line-height:1;
    padding:5px;
    display:inline-block;
    padding-right:50px;
}

input.sbutton{
    background-color:#d91515;
    border:none;    
    color:#fff;
    position:absolute;
    top:0px;right:0px;bottom:0px;
    width:50px;
}