CSS：提交按钮的背景图片答案

【问题标题】：CSS: background image for submit buttonCSS：提交按钮的背景图片
【发布时间】：2014-05-21 09:52:21
【问题描述】：

我用自定义背景图像设置了提交按钮的样式。但在不同的浏览器上显示不同。

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

但在 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) 额外高度

Live demo on jsfiddle.

【问题讨论】：

在 Opera 12.14、Windows XP 上运行完美。
提交按钮大小合适。是输入框错了。我能想到的唯一一件事是您可能需要设置line-height 和/或font-size。使用开发人员工具查看您是否可以找到任何可能正在设置的特定于浏览器的样式表规则，而您并未专门覆盖这些规则。
您可能还必须明确说出padding: 0; 之类的内容，以确保浏览器默认设置完全不受影响。同样值得一看的是normalize.css，只要把它放在你所有的自定义样式之前。
那你做得不对。您需要设置文本输入的样式 - 我再清楚不过了。
@crush，对不起。只是阅读您的评论不正确，所以我尝试了提交按钮，而不是文本字段。

标签： html css cross-browser

【解决方案1】：

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

【讨论】：

这正是问题所在。两个图像中的提交按钮是一致的，但文本框不是。设置文本框的样式。

【解决方案2】：

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

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

{font-style:normal}

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案4】：

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

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

【讨论】：