html - 表单输入和提交按钮在同一行

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>

抱歉发了这么长的帖子，我只是想把事情说清楚，无论如何我该如何解决 chrome 的这个问题？

编辑 这是按钮 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/