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） good
• Opera 12.14（Windows 7 32位）良好
• Safari 5.1.7（Windows 7 32位）额外高度
• Opera 11.51（Mac OS X 10.7.1）额外高度

Live demo on jsfiddle

Answer 1

在我看来，文本框的高度与提交按钮不同。尝试设置文本框的高度。

Answer 2

我在第二个搜索栏中看到，文字是斜体，看起来略小。我认为搜索栏正在调整文本并使其自身变小，这使得搜索图标显得更大。

您可能需要做的是将其添加到占位符受控的样式表中：

{font-style:normal}

Answer 3

试试这个。 它将为元素提供修复高度。

input[type="text"]{
    margin:30px 0 0;
    width:226px;
    color:#999999;
    font-size:12px;
    font-style:italic;
    border:1px solid #cccccc;
    border-right:none;
    background-color:#ededed;
    float:left;
    height:28px;
    padding-right: 7px;
    padding-left: 7px;
    line-height: 28px;
}

Answer 4

提交按钮＆amp;输入文本字段具有不同的边框，边距，填充等默认值。首先，您必须将此设置为提交按钮和文本字段

margin:0;
padding: 0;
border: none;
outline: none;