CSS:提交按钮的背景图片

Question

我已经设置了自定义背景图片的提交按钮.但它在不同的浏览器上显示不同.

几乎所有浏览器都显示正确:

但在2它有额外的高度:

任何人都可以指出我的标记有什么问题吗？

CSS:

input[type="submit"]{
    background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px  no-repeat;
    width:30px;
    height:30px;
    border:none;
    float:left;
    margin:30px 0 0;
    cursor:pointer;
}

HTML:

<form>
    <input type="text" class="placeholder" value="Search" />
    <input type="submit" value="" />
</form>

测试:

• IE 8.0 不错
• IE 7.0 不错
• iPhone 好
• Chrome 24.0 不错
• Firefox 18.0.2 不错
• Safari 5.1(Mac OS X 10.7.1)不错
• Opera 12.14(Windows 7 32位)不错
• Safari 5.1.7(Windows 7 32位)额外高度
• Opera 11.51(Mac OS X 10.7.1)额外高度

现场演示jsfiddle.

Answer 1

在我看来,文本框的高度不同于提交按钮.尝试设置文本框的高度.