從所有瀏覽器上的HTML按鈕中刪除文本？

我們有許多使用背景圖像的大小和顏色的按鈕。背景圖像本身有一個標籤，但我們需要將按鈕的文本保留在HTML中以便可用性/可訪問性。如何讓文字在所有瀏覽器中消失？從所有瀏覽器上的HTML按鈕中刪除文本？

現代瀏覽器很容易，我只是用 -

color: transparent;

這是Internet Explorer 7中，我不能得到遵守。我已經嘗試了這些CSS屬性，並且它們都不能完全刪除文本而不會破壞我的網站在過程中的佈局。

font-size: 0px; 
line-height: 0; 
text-indent: -1000em; 
display: block; 
padding-left: 1000px;

我非常感謝任何幫助。

我們能得到您所使用的HTML代碼的樣本？如果沒有它，有點難以理解你想要做什麼。 – Sasha 2009-11-13 00:58:49

如何讓文字消失在所有瀏覽器中？

我想你希望altarnative文本消失，如果圖像加載。

對於這個puprpose您可以使用此：

<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />

如果需要，您可以申請額外的樣式，但這起碼會爲你做這項工作。

2009-11-12 23:25:16

我認爲他在談論正常的按鈕元素，而不是圖像。 – 2009-11-13 01:24:52

如果我理解正確的問題，這可能工作（我沒有IE7目前測試，所以不是100％確定）

對於類似這樣的標記：

<a href="javascript:return false;" class="button" id="buttonOK"><span 
    class="icon">Ok</span></a>

使用這個CSS：

span.icon { 
    /*visibility: hidden;*/ 
    display:block; 
    margin-left:-1000; 
    width:100px; 
}

或這可能取決於你的可用性/無障礙要求的工作：

span.icon { 
    visibility: hidden; 
}

2009-11-13 01:17:51 Upgradingdave

他認爲，他用實際的按鈕形式元素。 – 2009-11-13 01:24:19

我不知道標籤需要在HTML中包含哪些用戶/程序，但是如果是用於文本瀏覽器等，也許可以插入JavaScript來刪除onLoad標籤？

JQuery或Prototype會讓這很容易。

2009-11-13 01:26:56

在某些情況下，您可以使用propery「content」來更改元素中包含的內容，但我個人會使用javascript來執行此操作。

只需在元素中寫入空白文本即可。

2009-11-13 01:49:31 David

如果按鈕輸入提交按鈕，使用圖像

<input type="image" src="/images/some_image.png" />

如果他們是鏈接可以用CSS

input[type="image"] { 
    border: 1px solid red; 
    width: 150px; 
    height: 35px; 
}

這個樣式，戴夫提供了答案。

2009-11-13 02:09:30

類型圖像的輸入應該總是具有指定的「alt」屬性，就像普通的圖像標籤一樣。鑑於OP關心可訪問性，您應該將其添加到您的示例中。像'alt ='註冊我'會完全解決原來的問題。 – NickFitz 2009-11-13 10:56:58

就個人而言，我走了，所有的CSS的方法：

{ display: block; 
text-indent: -9999em; 
text-transform: uppercase; }

無論出於何種原因，text-transform: uppercase;確實爲IE7的伎倆。當然，你可能會有自己的CSS和其他樣式（如果需要）。

2011-03-09 22:08:03

附加到你的

color: transparent;

您可以使用類似

padding-left: 3000px; 
overflow: hidden;

問候

2011-08-10 20:24:24

只需注意，'color：transparent'不起作用，它是一種無效的顏色屬性。上面的修復也會顯着增加元素的寬度 – Liam 2013-02-21 11:02:49

回答