Html 搜索文本字段和按钮高度/位置（CSS）

我的搜索框有问题。我试图使文本字段和按钮的高度相同，但我不能在所有浏览器中都正确。以下是代码：。这种方法在Firefox中运行良好，但在Chrome中不起作用

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

谢谢

//编辑：因为有人要求进一步参考代码，所以它是： HTML

---

在输入元素上使用填充代替高度。行高应与Firefox的字体大小完全相同。所以，若你们想要你们的字体大小为16px，那个么把你们的行高设置为16px，并在顶部和底部添加填充物。对于“提交”按钮，请使用绝对定位以确保其位于顶部：0和底部：0。只需在输入中添加与提交按钮宽度相等的空白，就可以了

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

---

嗯，我希望解决方案不是这么简单，但是您在规则中为

sbutton

类定义了两次

height

：

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;  //that's one
    border:none;    
    color:#fff;
    position:relative;
    left:-6px;
    bottom:-1px;
    height:28px; //that's two
}

---

看看当你扔掉一个会发生什么。它应该会起作用。还可以查看文本框的

行高

规则。如果字体大小不同于行高，这将解释为什么大小不同。Firefox和Chrome使用从

em

s到像素的不同转换，反之亦然

您可以为这两个元素设置一个确定的高度属性，也可以简单地告诉Sbutton从Sfield继承样式

<input type="submit" value="Search" class="sfield sbutton"/>

我还添加了一些填充物，使其均匀

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>

---

你能把相关的代码贴到问题中，这样它将来会有用吗？谢谢你的回答，但这仍然不能完全解决我的问题。它在Chrome中显示正常，但在Firefox中按钮仍然比字段大。谢谢，但这没有帮助。高度仍然不均匀。事实上，最后一个高度是我试图修理这个东西留下的。但是移除任何一个都不起作用。嘿，非常感谢，这似乎起作用了。我不知道我们必须在输入元素上使用填充而不是高度，所以感谢您指出这一点！干杯

<input type="submit" value="Search" class="sfield sbutton"/>

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

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

input.sbutton{
    background-color:#d91515;
    height:inherit;
    border: 1px solid #d91515;  
    color:#fff;
    position:relative;
    margin: 0;
    height:30px;
}