Почему текст с отступом все еще отображается в 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>, чтобы узнать, получили ли вы лучшие результаты, но никаких обещаний.

EDIT: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; 
}