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

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

1 个答案: