为什么缩进的文本仍然在IE7中显示？

Question

我有一个图像按钮，而不是文本的提交按钮here，我用text-indent -9999px来“隐藏”文本值。但是，在IE7中，文本仍然显示在按钮上方。

我试图使文本透明，但没有帮助。

有什么我在这里失踪？

HTML：

<form action="news.php" method="post"> 
      <fieldset> 
      <input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" onfocus="if (this.value=='YOUR EMAIL ADDRESS') this.value='';" /> 
      <input type="submit" value="::Submit Query::" id="red-submit" /> 
      </fieldset> 
</form> 

这里是CSS：

input#red-submit     { 
           width: 90px; 
           height: 30px; 
           border-style: none; 
           text-indent: -9999px; 
           position: relative; 
           top: 5px; 
           left: 10px; 
           cursor: pointer; 
           background-color: transparent; 
           background-image: url(../_images/btn_submit-red.png); 
         } 

我将不胜感激一些帮助获得该文本的位置移动的方式进行。

谢谢。

Answer 1

由于IE是愚蠢的，而且它不会让我感到惊讶，如果text-indent只影响实际的文本节点，并且按钮的值看起来不是文本节点。

您可以尝试使用<button>标签来查看是否为您带来了更好的结果，但没有承诺。

编辑：Here's an article that deals with the same issue，并提供了一个解决方案。

input.button{ 
    width:114px; 
    height:37px; 
    border: none; 
    background: transparent url(images/submit_btn.gif) no-repeat center; 
    overflow: hidden; 
    text-indent: -999px; 

    /* The fix:*/  
    font-size: 0; 
    display:block; 
    line-height: 0; 
}