我目前正在<input type='button'/>使用以下 CSS 设置元素的样式：
background: transparent url(someimage);
color: transparent;
我希望按钮显示为图像，但我不希望value文本显示在其顶部。正如预期的那样，这适用于 Firefox。但是，在 Internet Explorer 6 和 Internet Explorer 7 上，我仍然可以看到文本。
我尝试了各种技巧来隐藏文本，但没有成功。是否有使 Internet Explorer 正常运行的解决方案？
（我被限制使用type=button，因为这是一个 Drupal 表单，它的表单 API 不支持图像类型。）
我用
button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0} /* ie6 */
*+html button{font-size:0;display:block;line-height:0} /* ie7 */
我遇到了相反的问题（在 Internet Explorer 中工作，但在 Firefox 中没有）。对于 Internet Explorer，您需要添加左填充，对于 Firefox，您需要添加透明色。所以这是我们针对 16px x 16px 图标按钮的组合解决方案：
input.iconButton
{
font-size: 1em;
color: transparent; /* Fix for Firefox */
border-style: none;
border-width: 0;
padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
text-align: left;
width: 16px;
height: 16px;
line-height: 1 !important;
background: transparent url(../images/button.gif) no-repeat scroll 0 0;
overflow: hidden;
cursor: pointer;
}
好：
font-size: 0;
line-height: 0;
为我工作真棒！
您是否尝试过将 text-indent 属性设置为 -999em 之类的？这是“隐藏”文本的好方法。
或者您可以将字体大小设置为 0，这也可以。
http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/
为什么要包含该value属性？从记忆中，您不需要指定它（尽管 HTML 标准可能会说您这样做 - 不确定）。如果您确实需要一个value属性，为什么不只是 state value=""？
如果您确实采用这种方法，您的 CSS 将需要额外的背景图像高度和宽度属性。
你们中的一些人在不同 IE 中工作或不工作的解决方案中看到的差异可能是由于打开或关闭了兼容模式。在 IE8 中，除非打开兼容模式，否则text-indent 可以正常工作。如果打开兼容模式，则 font-size 和 line-height 可以解决问题，但会弄乱 Firefox 的显示。
所以我们可以使用css hack让firefox忽略我们的ie规则......就像这样......
text-indent:-9999px;
*font-size: 0px; line-height: 0;
font-size: 0.1px;在 Firefox、Internet Explorer 6、Internet Explorer 7 和 Safari 中，应用到按钮对我有用。我发现的其他解决方案都不适用于所有浏览器。
在 HTML 文档的顶部使用条件语句：
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
然后在CSS中添加
.ie7 button { font-size:0;display:block;line-height:0 }
取自 HTML5 Boilerplate - 更具体地说是paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
我从某个地方注意到了这一点：
将文本转换添加到输入以将其删除
input.button {
text-indent:-9999px;
text-transform:capitalize;
}
写入您的 CSS 文件：
#your_button_id
{
color: transparent;
}
这适用于 Firefox 3、Internet Explorer 8、Internet Explorer 8 兼容模式、Opera 和 Safari。
*注意：包含这个的表格单元格有padding:0和text-align:center。
background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;
overflow:hidden并且padding-left对我来说工作正常。
对于火狐：
width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;
对于 IE：
padding-left:1000px;
color:transparent; /* For FF */
*padding-left:1000px ; /* FOR IE6,IE7 */
我有同样的问题。正如许多其他帖子所报道的那样：填充技巧仅适用于 IE。
font-size:0px仍然显示一些小点。
唯一对我有用的是做相反的事情
font-size:999px
...但我只有 25x25 像素的按钮。
相反，只需执行 ahook_form_alter并将按钮设置为图像按钮，您就完成了！
以下对我来说效果最好：
HTML：
<input type="submit"/>
CSS：
input[type=submit] {
background: url(http://yourURLhere) no-repeat;
border: 0;
display: block;
font-size:0;
height: 38px;
width: 171px;
}
如果您未设置value，<input type="submit"/>它将在您的按钮内放置默认文本“提交”。所以，只需font-size: 0;在您的提交上设置，然后确保为您的输入类型设置一个height和width，以便您的图像将显示。如果您需要，请不要忘记提交的媒体查询，例如：
CSS：
@media (min-width:600px) {
input[type=submit] {
width:200px;
height: 44px;
}
}
这意味着当屏幕的宽度正好为 600 像素或更大时，按钮将改变它的尺寸
color:transparent;然后任何text-transform属性也可以解决问题。
例如：
color: transparent;
text-transform: uppercase;