CSS：提交按钮的背景图片

我使用自定义背景图片设计了提交按钮。但它在不同的浏览器上显示不同。CSS：提交按钮的背景图片

几乎所有浏览器中显示它正确的：

enter image description here

但在二有额外的高度：

enter image description here

任何人都能指出是什么毛病我的标记？

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 好
火狐18.0.2 好
的Safari 5.1（Mac OS X的10.7.1）良好
歌剧12.14（ Windows 7 32位）好
Safari 5.1.7（Windows 7 32-bi T）额外的高度
歌剧11.51（Mac OS X的10.7.1）额外的高度

Live demo on jsfiddle。

来源

2013-02-18 Arthur Halma

在Opera 12.14上，Windows XP，它完美的工作。 – 2013-02-18 13:18:07

提交按钮是正确的大小。这是输入框是错误的。唯一我能想到的是你可能需要设置'line-height'和/或'font-size'。使用开发人员工具查看是否可以找到任何可能正在设置的浏览器特定样式表规则，而不是专门覆盖。 – crush 2013-02-18 13:22:02

您可能还必须明确地说出诸如'padding：0;'的内容，以确保浏览器的默认设置完全没有问题。另外值得一提的是'normalize.css'，只需在所有自定义样式之前粘贴即可。 – Seer 2013-02-18 13:23:38

试试这个。它会给元素一个固定的高度。

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; 
}

来源

2013-02-18 13:23:19 jjj

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

来源

2013-02-18 13:22:33 DannyBoy

这正是问题所在。提交按钮在两个图像中都是一致的，但文本框不是。设置文本框的样式。 – crush 2013-02-18 13:27:02

谢谢。你是对的。 – 2013-02-18 13:33:55

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

什么你可能需要做的就是添加到您的样式表，其中占位符被控制：

{font-style:normal}

来源

2013-02-18 14:44:02 THeBAckwardss

提交按钮&输入文本框具有边框，边距，填充等不同的默认值首先你必须把它提交到提交按钮和文本字段

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

来源

2014-05-21 01:52:21

CSS：提交按钮的背景图片

回答

相关问题