隱藏文字：文字縮進或顏色：透明？

Question

我看到很多次試圖隱藏文本與CSS，例如：

<a class="back">back</a>  
a.back { text-indent: -9999px; display:block; width: 100px; height: 50px; background: url(/images/back.png); } 

我一直想知道爲什麼不使用：

a.back { color: transparent; display:block; width: 100px; height: 50px; background: url(/images/back.png); } 

在我看來，語義正確，另外，當我嘗試使用文本縮進的方法時，它在iPad顯示中引起了一個錯誤：文本顯示在錨標記左側99999px，並導致了一個奇怪的不必要的水平滾動。 第二個代碼有沒有共同的已知問題，或者可以使用？

Answer 1

font-size: 0px;應該這樣做。 如果你想讓按鈕比文字小，你還需要添加line-height: 1em;或類似的東西。

Answer 2

不要隱藏內容和所有依靠一個背景圖像上。

HTML提供了一種方法，可以在圖像無法顯示的情況下（alt屬性）包含具有文本內容含義的圖像（<img>元素）。沒有必要用樣式表僞裝它。

<a class="back"><img alt="back" src="/images/back.png"></a>  

圖標是內容，值得對待。所有使用文本和背景圖片的努力最終都會受到限制。 <img>元素是爲這個用例設計的。