用於隱藏鏈接文本的文本縮進

我一直在尋找一種替換文本縮進的方法：-9999px用於隱藏鏈接文本和顯示圖像的鏈接，用於表示主頁徽標按鈕。我發現了一個簡單的解決方案，似乎工作，但似乎沒有得到任何炒作，所以我想知道是否有洞，我沒有看到。下面是解決方案，class =「homeButton」應用css翻轉圖像，class =「hide」顯然隱藏了鏈接文本。請讓我知道，如果這有什麼缺點我沒有看到作爲一種方式仍然有一個文本鏈接與文本沒有正常顯示在屏幕上，但仍然顯示在屏幕閱讀器和搜索引擎。感謝名單一如既往...用於隱藏鏈接文本的文本縮進

<a class="homeButton" href="index.html"><span class="hide">Home Button</span></a>

來源

2013-04-22 John

你不說究竟他.hide的內容如何，但如果想法是使用顯示：無，算了吧。屏幕閱讀器和搜索蜘蛛會忽略帶display-none的元素，因爲隱藏內容被認爲是無關緊要的（尤其是黑帽SEO用戶可以用關鍵字輕鬆填充隱藏文本）。

我真的不知道文本縮進解決方案有什麼問題。當然，我會減少縮進值來阻止IE6爲一個巨大的未使用的畫布預留內存，但它仍然是推薦這些工作的技術。

來源

2013-04-22 22:13:37

@Jimmy ...是的，顯示：無; Thanx，我知道這很容易做到。我明白text-indent是目前的方式，它似乎應該有一個更好的方法。 – John 2013-04-22 22:28:04

HTML代碼

<h1><a class="homeButton" href="index.html">Home Button</a></h1>

CSS代碼

h1 { 
    display: block; 
    width: 386px; 
    height: 83px; 
    margin: 11px 0 0 10px; 
    text-align: left; 
    overflow-x: hidden; 
} 

h1 a.homeButton { 
    display: block; 
    width: 386px; 
    height: 83px; 
    text-indent: -19999px; 
    background-repeat: no-repeat; 
    background-image: url("http://existstudio.pl/images//template/ex-ist/ex-ist-logotype.png"); 
}

DEMO

http://jsfiddle.net/bartekbielawa/rmWhF/

說明

<h1>你可以改變你喜歡的東西。我prefere <h1>，因爲是好的SEO

來源

2013-04-22 23:03:20

用於隱藏鏈接文本的文本縮進

回答

相關問題