CSS隐藏INPUT BUTTON值文本

我目前正在使用以下CSS设置元素样式:

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

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

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

(我被限制使用,type=button因为这是一个Drupal形式,它的表单API不支持图像类型.)

1> Emily..：

---

我用

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

---

+1`行高:0`在IE中为我做了诀窍.谢谢.

2> jsalwen..：

---

我有相反的问题(在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;
}

3> 小智..：

---

好:

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

为我工作真棒!

4> Ryan Doherty..：

---

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

或者您可以将font-size设置为0,这也可以.

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

5> Phil.Wheeler..：

---

你为什么要包括这个value属性？从内存中,您不需要指定它(虽然HTML标准可能会说你做 - 不确定).如果你确实需要一个value属性,为什么不只是说明value=""？

如果您采用这种方法,您的CSS将需要背景图像的高度和宽度的其他属性.

---

应该注意的是,这使得按钮对于视力受损的用户完全无用.

---

这对于可访问性来说非常差.您应该考虑将不同的答案标记为正确.

---

MVC模式中还需要自动将按钮的值传递到控制器中.如果在同一表单上有"提交"和"取消"按钮,则可以使用该按钮的值来确定实际点击了哪个按钮.

---

这实际上是一个非常有效的观点.您可以通过向按钮添加title和alt属性来解决此问题,不是吗？

---

我同意这对可访问性不利,值得注意的是你应该谨慎使用它,但这不是问题的一部分.这个答案有效地解决了这个问题.我愿意打赌,这里讨论的大多数网站甚至没有适合其他语言的国际化,更不用说为视力障碍者考虑屏幕阅读器了.;)