CSS来隐藏inputbutton的值文本
我目前使用下面的CSS来devise一个<input type='button'/>元素：
background: transparent url(someimage); color: transparent;
我希望button显示为图像，但我不希望将value文本显示在其上。 如预期的那样，这适用于Firefox。 但是，在Internet Explorer 6和Internet Explorer 7上，仍然可以看到文本。
我尝试了各种各样的技巧来隐藏文字，但没有成功。 有没有解决scheme，使Internet Explorer的行为？
（我被限制使用type=button因为这是一个Drupal表单，它的表单API不支持图像types。）
你为什么包括value属性呢？ 从内存中，你不需要指定它（虽然HTML标准可能会说你做 – 不知道）。 如果你确实需要一个value属性，为什么不只是状态value="" ？
如果你采取这种方法，你的CSS将需要额外的属性的背景图像的高度和宽度。
我用
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图标button的组合解决scheme：
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(..http://img.dovov.combutton.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/
有些人认为，在不同的IE浏览器中工作或不工作的解决scheme可能是由于打开或closures了兼容模式。 在IE8中， 除非打开兼容模式， 否则文本缩进工作得很好。 如果打开兼容模式，那么字体大小和行高就可以做到这一点，但是会让Firefox的显示变得混乱。
所以我们可以使用CSS的黑客让Firefox忽略我们的规则..就像这样…
text-indent:-9999px; *font-size: 0px; line-height: 0;
在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删除它
input.button { text-indent:-9999px; text-transform:capitalize; }
写入您的CSS文件：
#your_button_id { color: transparent; }
应用font-size: 0.1px; 到button适用于我在Firefox，Internet Explorer 6，Internet Explorer 7和Safari。 我find的其他解决scheme在所有浏览器中都没有效果。
overflow:hidden和padding-left对我来说工作正常。
对于Firefox：
width:12px; height:20px; background-image:url(images/arrow.gif); color:transparent; overflow:hidden; border:0;
对于IE：
padding-left:1000px;
这适用于Firefox 3，Internet Explorer 8，Internet Explorer 8兼容模式，Opera和Safari。
*注意：包含这个的表格单元有padding:0和text-align:center 。
background: none; background-image: url(..http://img.dovov.comimage.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;
我有同样的问题。 和其他许多post一样，填充技巧只适用于IE。
font-size:0px仍然显示一些小点。
唯一对我有用的是做相反的事情
font-size:999px
…但我只有25×25像素的button。
color:transparent; /* For FF */ *padding-left:1000px ; /* FOR IE6,IE7 */
以下对我来说最合适：
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; }
如果您没有在<input type="submit"/>上设置value ，它会在您的button中放置默认的文本“Submit”。 所以，只需设置font-size: 0; 然后确保为inputtypes设置了height和width ，以便显示图像。 如果您需要，请不要忘记提交媒体查询，例如：
CSS：
@media (min-width:600px) { input[type=submit] { width:200px; height: 44px; } }
这意味着当屏幕的宽度大于或等于600像素时，button将会改变尺寸
相反，只要做一个hook_form_alter ，并使button一个图像button，你就完成了！
color:transparent; 然后任何text-transform属性也做的伎俩。
例如：
color: transparent; text-transform: uppercase;
