在同一行中输入和提交按钮

Question

我正在尝试创建搜索字段，现在这是除了chrome

之外的所有浏览器的外观

这就是它在chrome中的表现：

这是我的css：

#search_input{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DEDEDE;
border-style: solid none solid solid;
border-width: 1px medium 1px 1px;
height:25px;
padding-left:3px;
}


#search_submit {
position: relative;
right: 4px;
top: 8px;
}

还有html：

<form action="#">
    <input id="search_input" type="text" name="search" />
    <input id="search_submit" type="image" src="../media/images/search_button.jpg" />
</form>

很抱歉这么长的帖子我只是想清楚一点，反正如何解决这个问题？

编辑以下是按钮http://shinigami.cd.lt/media/images/search_button.jpg

输入由css完成，没有使用图像。

Answer 1

图片大小错误。

图片的高度必须为：

<height of input> + <padding of input> + <border of input>
= 25 + 0 + 2x1 = 27px

可在此处找到更正的CSS（应用缩放以进行调试）： http://jsfiddle.net/BJJ38/2/

要确保输入元素看起来符合预期，您必须明确定义padding-top和-bottom属性。与padding-left合并后，将显示以下属性：

padding: 0 0 0 3px;

此外，您必须定义宽度以获得一致的外观。例如：

width: 50px;

另一种方法是将按钮放在输入字段内，并扩展右边的填充，以使焦点上的轮廓看起来更好：http://jsfiddle.net/BJJ38/3/