2

我的搜索框有问题。我正在尝试使文本字段和按钮的高度相同，但我无法在所有浏览器中正确设置。这是代码：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;
}
4

4 回答 4

2

在输入元素上使用填充而不是高度。Line-height 应该与 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;
}
于 2012-10-23T21:46:16.697 回答
1

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

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

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

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

于 2012-10-23T21:46:58.490 回答
0

好吧，我希望解决方案不是这么简单，但是您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 使用从ems 到像素的不同转换，反之亦然。

于 2012-10-23T21:46:33.143 回答
0

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;
}
于 2012-10-23T21:49:08.307 回答