如何使提交按钮中的值透明？

Question

我在表单中有一个提交按钮,我使用一个css类,它将背景图像设置为提交按钮.我需要为此提交按钮赋值,但我不希望它显示给用户.如果我将css颜色属性设置为透明,它在我的Firefox 3.6中工作正常.但是值显示在ie 6和7.我如何解决这个问题？

<div  id="upldTempForm" class="pgcontent">
  <form>
    <div style="text-align:center;">
      <input type="submit" name="create" value="" class="save" />
      <input type="button" name="cancel" value="" class="cancel"/>
    </div>
  </form>
</div>

css

.pgcontent {
    background-color:#ECECEC;
    border:2px solid #E7E7E7;
    margin:30px auto;
    width:820px;
    font-size:12px;
}

.save{
    background-image:url("../images/save.gif");
    background-repeat:no-repeat;
    width:100px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;    
}

.cancel{
    background-image:url("../images/cancel.gif");
    background-repeat:no-repeat;
    width:110px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;
}

Answer 1

使用text-indent将起作用.

例:

INPUT[type=button], INPUT[type=submit]
{
    font-weight: bold;

    color: #000000;

    text-indent: -99999px;
    text-align: center;

    background-color: Transparent;
    background-image: url(../images/button.png);
    background-repeat: no-repeat;

    cursor: pointer;
}

在nailxx的评论之后做了一些小的研究.IE是一个交易破坏者(再次).

对于IE添加:

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

解

<div  id="upldTempForm" class="pgcontent">
<form>
    <div>
        <input type="submit" name="create" value="Create" class="save" />
        <input type="button" name="cancel" value="Cancel" class="cancel"/>
    </div>
</form>
</div>

css

.pgcontent 
{
    background-color:#ECECEC;
    border:2px solid #E7E7E7;
    margin:30px auto;
    width:820px;
    font-size:12px;
    text-align:center;
}

.save
{
    background-image:url("../images/save.gif");
    background-repeat:no-repeat;
    width:100px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;    

    line-height: 100;
    overflow: hidden;
}

.cancel
{
    background-image:url("../images/cancel.gif");
    background-repeat:no-repeat;
    width:110px;
    height:40px;
    cursor:pointer;
    background-color:transparent;
    border:none;

    line-height: 100;
    overflow: hidden;
}