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的font-size完全相同。因此，如果您希望字体大小为16px，请将行高设置为16px并在顶部和底部添加填充。对于提交按钮，请使用绝对位置以确保它位于顶部：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;
}

Answer 2

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

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

我还添加了一些填充以使其均匀。

http://codepen.io/anon/pen/zBlwD

Answer 3

好吧，我希望解决方案不是这么简单，但您在height类的规则中定义了两次sbutton：

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
}

看看当你摆脱一个时会发生什么。它应该工作。另请查看文本框的line-height规则。如果字体大小不同于行高，则可以解释为什么大小不同。 Firefox和Chrome使用从em s到像素的不同转换，反之亦然。

Answer 4

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

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

4 个答案: