Question

我目前使用以下CSS设置<input type='button'/>元素样式：

background: transparent url(someimage);
color: transparent;

我希望按钮显示为图像，但我不希望value文本显示在其上。这对Firefox的预期效果很好。但是，在Internet Explorer 6和Internet Explorer 7上，我仍然可以看到该文本。

我尝试过各种各样的技巧来隐藏文字，但没有成功。是否有使Internet Explorer运行的解决方案？

（我被限制使用type=button，因为这是一个Drupal表单，其表单API不支持图像类型。）

Answer 1

我用

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 */

Answer 2

我遇到了相反的问题（在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;
}

Answer 3

以及：

font-size: 0; line-height: 0;

对我来说很棒！

Answer 4

您是否尝试将text-indent属性设置为-999em？这是“隐藏”文本的好方法。

或者你可以将font-size设置为0，这也可以。

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

Answer 5

为什么要包含value属性？从内存中，您不需要指定它（虽然HTML标准可能会说你做 - 不确定）。如果您确实需要value属性，为什么不只说明value=""？

如果采用这种方法，您的CSS将需要额外的背景图像高度和宽度属性。

Answer 6

有些人在不同的IE中工作与否的解决方案中看到的差异可能是由于打开或关闭兼容模式。在IE8中，text-indent工作正常，除非兼容模式已打开。如果打开了兼容模式，那么font-size和line-height可以解决这个问题，但可能会搞乱Firefox的显示。

所以我们可以使用css hack让firefox忽略我们的ie规则..就像这样......

text-indent:-9999px;
*font-size: 0px; line-height: 0;

Answer 7

将font-size: 0.1px;应用于该按钮适用于Firefox，Internet Explorer 6，Internet Explorer 7和Safari。我发现其他解决方案都不适用于所有浏览器。

Answer 8

写入您的CSS文件：

#your_button_id 
    {
        color: transparent;
    }

Answer 9

在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/

Answer 10

我从某个地方注意到了这一点：

将text-transform添加到输入以将其删除

input.button {
    text-indent:-9999px;
    text-transform:capitalize;
}

Answer 11

适用于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;

Answer 12

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;

Answer 13

以下内容最适合我：

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

这意味着当屏幕宽度恰好为600px或更大时，按钮将改变其尺寸

Answer 14

相反，只需执行hook_form_alter并将按钮设为图像按钮即可完成！

Answer 15

我遇到了同样的问题。正如许多其他帖子所报告的那样：填充技巧仅适用于IE。

font-size:0px仍会显示一些小点。

唯一对我有用的是做相反的事情

font-size:999px

...但我只有25x25像素的按钮。

Answer 16

color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */

Answer 17

color:transparent;然后任何text-transform属性都可以解决问题。

例如：

color: transparent;
text-transform: uppercase;

CSS隐藏INPUT BUTTON值文本

17 个答案: