爲什麼縮進的文本仍然在IE7中顯示？

我有一個圖像按鈕，而不是文本的提交按鈕here，我用text-indent -9999px來「隱藏」文本值。但是，在IE7中，文本仍然顯示在按鈕上方。爲什麼縮進的文本仍然在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); 
         }

我將不勝感激一些幫助獲得該文本的位置移動的方式進行。

謝謝。

來源

2010-07-08 fmz

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

來源

2010-07-08 15:22:55 Matchu

嗨路易斯，優秀的解決方案。我刪除了顯示塊，因爲它拋出了我的按鈕不對齊，但其他兩行代碼有效地解決了這個問題。感謝這篇文章。你過去幫助過我。我記得你的UP avitar。謝謝！ – fmz 2010-07-08 15:30:35

@fmz - 哈哈，很高興幫助。一旦它允許你一定要點擊複選標記;） – Matchu 2010-07-08 15:31:24

爲什麼縮進的文本仍然在IE7中顯示？

回答

相關問題