Почему текст с отступом по-прежнему отображается в IE7?

Question

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

РЕДАКТИРОВАТЬ: Вот статья, посвященная той же проблеме предлагает решение.

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