为什么我在使用自定义图形时在Chrome / Firefox中提供不同的提交按钮位置？

Question

我有2个输入...文本字段和提交按钮。我通过CSS使用自定义背景图像。图像的高度均为18px。在Chrome中，按钮显示的位置略低于文本字段。在Firefox中，它是正确的。

我正在使用的CSS是：

.search-field {background: url('search-field.png') no-repeat transparent!important; width: 117px!important; height: 18px!important; border: none!important; margin-right: -7px!important; }

.search-button {background: url('search-button.png') no-repeat transparent!important; width: 16px!important; height: 18px!important; border: none!important; text-indent: -9999!important; text-transform: capitalize!important;}

我正在使用的HTML是：

<div class="search">

    <input class="search-field" type="text" />
    <input class="search-button" type="submit" value="" />

</div>

以下屏幕截图来自Chrome。在调整了字段的CSS之后，我似乎能够在Chrome中纠正它，但随后它以相反的方式在FF中断。

Answer 1

希望这会有所帮助..检查小提琴.. http://jsfiddle.net/mvivekc/XNNAW/